微信小程序搜索分页功能实现（微信小程序搜索分页功能实现在哪里）

微信小程序搜索分页功能实现（微信小程序搜索分页功能实现在哪里）

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

前端：

搜索 {{item.SongName}}--{{item.SingerName}} {{item.SingerName}} 正在载入更多... 已加载全部 -

样式：

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:

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中文网。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。