微信小程序搜索分页功能实现

1. 这里以搜索歌曲为例：

   

   

前端：

<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=='0' ? ' nocopyright' : ''}}"></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>

样式：

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: '/';     margin: 0 8rpx;   }   .loading{     padding: 10rpx;     text-align: center;   }   .loading:before{     display: inline-block;     margin-right: 5rpx;     vertical-align: middle;     content: '';     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;   }

js:

var util = require('../../utils/util.js') Page({   data: {     searchKeyword: '',  //需要搜索的字符       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();     }   } })

function getSearchMusic(keyword, pageindex, callbackcount, callback) {   wx.request({     url: 'http://songsearch.kugou.com/song_search_v2',     data: { keywords:'庄心妍', clientver:'=& platform=WebFilter'     },     // method: 'post',     header: { 'content-Type': 'application/json' },     success: function (res) {       // console.log(res)       if (res.statusCode == 200) {         callback(res.data);       }     }   }   }

以上就是对微信小程序搜索分页功能实现的全部介绍，如果您想了解更多有关小程序开发教程，请关注PHP中文网。

以上就是微信小程序搜索分页功能实现的详细内容，更多内容请关注技术你好其它相关文章！