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

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

这里以搜索歌曲为例：

前端：

 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: #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; 
}
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();
})
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);
 }
以上就是对微信小程序搜索分页功能实现的全部介绍，如果您想了解更多有关小程序开发教程，请关注PHP中文网。
 
以上就是微信小程序搜索分页功能实现的详细内容，更多请关注php中文网其它相关文章！
 
  
 微信app下载
 
微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！