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

本篇文章给大家带来的内容是关于微信小程序搜索分页功能实现，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

这里以搜索歌曲为例：

前端：<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,//第一次加载，设置1searchSongList: [],//放置返回数据的数组,设为空isFromSearch: true,//第一次加载，设置truesearchLoading: 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+1isFromSearch: 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中文网。以上就是微信小程序搜索分页功能实现的详细内容，更多请关注小潘博客其它相关文章！