微信小程序,2--下拉刷新和上拉加载更多
下拉刷新
1.首先在.json文件中配置(如果在app.json文件中配置,那么整个程序都可以下拉刷新。如果写在具体页面的.json文件中,那么就是对应的页面下拉刷新。)
具体页面的.json文件:
{ "enablePullDownRefresh":true }
app.json文件:
"window":{ "enablePullDownRefresh": true }
2.js文件中添加回调函数
/** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { },
上拉加载更多(不需要配置)
/** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { },
1.publish.wxml文件
<block wx:for="{{publishs}}" wx:key="publishs"> <view class="publish"> <text>{{item.songname}}</text> </view> </block> <view class="weui-loadmore" hidden="{{!isHideLoadMore}}"> <view class="weui-loading"></view> <view class="weui-loadmore__tips">正在加载</view> </view> <view class="Completesollow" hidden="{{!searchLoadingComplete}}">没有更多了...</view>
2.publish.js文件
/** * 页面的初始数据 */ data: { publishs:[], isHideLoadMore:false, //"上拉加载"的变量,默认false,隐藏 searchLoadingComplete:false, //“没有数据”的变量,默认false,隐藏 page:1, //第一页 isFromSearch:true }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.dataget() }, dataget:function(){ var that = this wx.request({ url: 'https://c.y.qq.com/soso/fcgi-bin/search_for_qq_cp?g_tk=5381&uin=0&format=json&inCharset=utf-8&outCharset=utf-8¬ice=0&platform=h5&needNewCode=1&w=%E9%9F%B3%E4%B9%90&zhidaqu=1&catZhida=1&t=0&flag=1&ie=utf-8&sem=1&aggr=0&perpage=20&n=15&p='+this.data.page+'&remoteplace=txt.mqq.all&_=1501467319794', //仅为示例,并非真实的接口地址 data: { x: '', y: '' }, header: { 'content-type': 'application/json' }, success: function (res) { console.log(res.data) //判断是否有数据,有则取数据 if (res.data.data.song.curnum!= 0) { let searchList = []; //如果isFromSearch是true从data中取出数据,否则先从原来的数据继续添加 数据继续添加进数组 that.data.publishs.concat that.data.isFromSearch ? searchList = res.data.data.song.list : searchList = that.data.publishs.concat(res.data.data.song.list) that.setData({ publishs: searchList, isHideLoadMore: true, }) }else{ that.setData({ searchLoadingComplete: true, //显示 isHideLoadMore: false //把"上拉加载"的变量设为false,隐藏 }); } } }) }, //加载更多 onReachBottom: function () { console.log('加载更多') setTimeout(() => { this.setData({ // isHideLoadMore: true, // searchLoadingComplete: false, page:this.data.page+1, isFromSearch: false }) this.dataget(); }, 1000) },
- 上一篇 »小程序订单页面下拉刷新和上拉加载
- 下一篇 »微信小程序 onReachBottom 上拉加载