Implementierung der WeChat-Applet-Such-Paging-Funktion

云罗郡主
Freigeben: 2019-01-21 11:14:09
nach vorne
5730 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich mit der Implementierung der Such-Paging-Funktion des WeChat-Applets. Ich hoffe, dass er für Sie hilfreich ist .

  1. Hier ist ein Beispiel für die Suche nach Liedern:

    Implementierung der WeChat-Applet-Such-Paging-Funktion

    Implementierung der WeChat-Applet-Such-Paging-Funktion

Frontend:

<view class="search">  
  <view class="search-bar">  
    <view class="search-wrap">  
        <icon type="search" size="16" class="icon-search" />  
        <input type="text" placeholder="请输入搜索内容" class="search-input" name="searchKeyword" bindinput="bindKeywordInput" value="{{searchKeyword}}" />  
    </view>  
    <view class="search-cancel" bindtap="keywordSearch">搜索</view>  
  </view>  
  <view class="search-result">  
    <scroll-view scroll-y="true" bindscrolltolower="searchScrollLower">  
      <view class="result-item" wx:for="{{searchSongList}}" wx:key="unique"  data-data="{{item}}" >  
        <view class="icon{{item.isonly==&#39;0&#39; ? &#39; nocopyright&#39; : &#39;&#39;}}"></view>  
        <text class="title">{{item.SongName}}--{{item.SingerName}}</text>  
        <view class="subtitle">  
          <text>{{item.SingerName}}</text>  
        </view>  
      </view>  
      <view class="loading" hidden="{{!searchLoading}}">正在载入更多...</view>  
      <view class="loading complete" hidden="{{!searchLoadingComplete}}">已加载全部</view>  
    </scroll-view>    
  </view>  
</view>
Nach dem Login kopieren

Stil:

page{  
  display: flex;  
  flex-direction: column;  
  height: 100%;  
}  
  
/*搜索*/  
.search{  
  flex: auto;  
  display: flex;  
  flex-direction: column;  
  background: #fff;  
}  
.search-bar{  
  flex: none;  
  display: flex;  
  align-items: center;  
  justify-content: space-between;  
  padding: 20rpx;  
  background: #f4f4f4;  
}  
.search-wrap{  
  position: relative;  
  flex: auto;  
  display: flex;  
  align-items: center;  
  height: 80rpx;  
  padding: 0 20rpx;  
  background: #fff;  
  border-radius: 6rpx;  
}  
.search-wrap .icon-search{  
  margin-right: 10rpx;  
}  
.search-wrap .search-input{  
  flex: auto;  
  font-size: 28rpx;  
}  
.search-cancel{  
  padding: 0 20rpx;  
  font-size: 28rpx;  
}  
  
/*搜索结果*/  
.search-result{  
  flex: auto;  
  position: relative;  
}  
.search-result scroll-view{  
  position: absolute;  
  bottom: 0;  
  left: 0;  
  right: 0;  
  top: 0;  
}  
.result-item{  
  position: relative;  
  display: flex;  
  flex-direction: column;  
  padding: 20rpx 0 20rpx 110rpx;  
  overflow: hidden;  
  border-bottom: 2rpx solid #e5e5e5;  
}  
  
.result-item .media{  
  position: absolute;  
  left: 16rpx;  
  top: 16rpx;  
  width: 80rpx;  
  height: 80rpx;  
  border-radius: 999rpx;  
}  
.result-item .title,  
.result-item .subtitle{  
  overflow: hidden;  
  text-overflow: ellipsis;  
  white-space: nowrap;  
  line-height: 36rpx;  
}  
.result-item .title{  
  margin-bottom: 4rpx;  
  color: #000;  
}  
.result-item .subtitle{  
  color: #808080;  
  font-size: 24rpx;  
}  
.result-item:first-child .subtitle text{  
  margin-right: 20rpx;  
}  
.result-item:not(:first-child) .subtitle text:not(:first-child):before{  
  content: &#39;/&#39;;  
  margin: 0 8rpx;  
}  
.loading{  
  padding: 10rpx;  
  text-align: center;  
}  
.loading:before{  
  display: inline-block;  
  margin-right: 5rpx;  
  vertical-align: middle;  
  content: &#39;&#39;;  
  width: 40rpx;  
  height: 40rpx;  
  /* background: url(../../images/icon-loading.png) no-repeat;   */
  background-size: contain;  
  animation: rotate 1s linear infinite;  
}  
.loading.complete:before{  
  display: none;  
}
Nach dem Login kopieren

js:

var util = require(&#39;../../utils/util.js&#39;)
Page({
  data: {
    searchKeyword: &#39;&#39;,  //需要搜索的字符  
    searchSongList: [], //放置返回数据的数组  
    isFromSearch: true,   // 用于判断searchSongList数组是不是空数组,默认true,空的数组  
    searchPageNum: 1,   // 设置加载的第几次,默认是第一次  
    callbackcount: 15,      //返回数据的个数  
    searchLoading: false, //"上拉加载"的变量,默认false,隐藏  
    searchLoadingComplete: false  //“没有数据”的变量,默认false,隐藏  
  },
  //输入框事件,每输入一个字符,就会触发一次  
  bindKeywordInput: function (e) {
    console.log("输入框事件")
    this.setData({
      searchKeyword: e.detail.value
    })
  },
  //搜索,访问网络  
  fetchSearchList: function () {
    let that = this;
    let searchKeyword = that.data.searchKeyword,//输入框字符串作为参数  
      searchPageNum = that.data.searchPageNum,//把第几次加载次数作为参数  
      callbackcount = that.data.callbackcount; //返回数据的个数  
    //访问网络  
    util.getSearchMusic(searchKeyword, searchPageNum, callbackcount, function (data) {
      console.log(data)
      //判断是否有数据,有则取数据  
      if (data.status != 0) {
        let searchList = [];
        //如果isFromSearch是true从data中取出数据,否则先从原来的数据继续添加  
        that.data.isFromSearch ? searchList = data.data.lists : searchList = that.data.searchSongList.concat(data.data.lists)
        that.setData({
          searchSongList: searchList, //获取数据数组  
           //存放歌手属性的对象  
          // searchLoading: true   //把"上拉加载"的变量设为false,显示  
        });
        //没有数据了,把“没有数据”显示,把“上拉加载”隐藏  
      } else {
        that.setData({
          searchLoadingComplete: true, //把“没有数据”设为true,显示  
          searchLoading: false  //把"上拉加载"的变量设为false,隐藏  
        });
      }
    })
  },
 
//点击搜索按钮,触发事件  
  keywordSearch: function (e) {
    this.setData({
      searchPageNum: 1,   //第一次加载,设置1  
      searchSongList: [],  //放置返回数据的数组,设为空  
      isFromSearch: true,  //第一次加载,设置true  
      searchLoading: true,  //把"上拉加载"的变量设为true,显示  
      searchLoadingComplete: false //把“没有数据”设为false,隐藏  
    })
    this.fetchSearchList();
  },
  //滚动到底部触发事件  
  searchScrollLower: function () {
    let that = this;
    if (that.data.searchLoading && !that.data.searchLoadingComplete) {
      that.setData({
        searchPageNum: that.data.searchPageNum + 1,  //每次触发上拉事件,把searchPageNum+1  
        isFromSearch: false  //触发到上拉事件,把isFromSearch设为为false  
      });
      that.fetchSearchList();
    }
  }
})
Nach dem Login kopieren
function getSearchMusic(keyword, pageindex, callbackcount, callback) {
  wx.request({
    url: &#39;http://songsearch.kugou.com/song_search_v2&#39;,
    data: {
keywords:&#39;庄心妍&#39;,
clientver:&#39;=& platform=WebFilter&#39;
    },
    // method: &#39;post&#39;,
    header: { &#39;content-Type&#39;: &#39;application/json&#39; },
    success: function (res) {
      // console.log(res)
      if (res.statusCode == 200) {
        callback(res.data);
      }
    }
  }
  }
Nach dem Login kopieren

Das Obige ist eine vollständige Einführung in die Implementierung der Such-Paging-Funktion von WeChat mini Wenn Sie mehr darüber erfahren möchten Mini-Tutorial zur Programmentwicklung, schauen Sie sich bitte die chinesische PHP-Website an.

Das obige ist der detaillierte Inhalt vonImplementierung der WeChat-Applet-Such-Paging-Funktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:csdn.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!