全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[六安seo公司首推久澳]微信小程序搜索分页功能实现

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

  

  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, // 设置加载的第几次,[六安seo公司首推久澳]默认是第一次 
 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△…△, //每次触发上拉事件,[沈阳做seo的公司]有关tab选项的文章推荐10篇。把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中文网。

  以上就是微信小程序搜索分页功能实现的详细内容,更多请关注久澳传媒编程栏目其它相关文章•☆◁!

[六安seo公司首推久澳]微信小程序搜索分页功能实现

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。