编程爱好者之家
今天做小程序,需要做上拉加载更多内容的功能,如下图
用到了onReachBottom方法,具体实现代码如下
Page({ //初始化数据 data: { list_all: [], }, onReachBottom:function(){ //上拉加载 wx.showLoading({ title: '正在加载', }) var that = this //加载次数加一 this.setData({ page:this.data.page+1 }) //从接口获取数据 wx.request({ url: 'https://test.wensite.com/getMore', data: { page: that.data.page, }, method: 'GET', header: { 'content-type': 'application/json;application/x-www-form-urlencoded;charset=utf-8' // 默认值 }, success: function (res) { if (res.data.list_all != undefined) { //组合获取的数据 for (var i = 0; i < res.data.list_all.length; i++) { that.data.list_all.push(res.data.list_all[i]) } //往前台传递数据 that.setData({ list_all: that.data.list_all }) } else if (res.data.list_all == undefined) { wx.showLoading({ title: '加载完毕', }) } } }) setTimeout(function () { wx.hideLoading() }, 1000) } })
下拉加载数据如下
前台页面如下
<view class='item_wrap'> <block wx:for="{{list_all}}" wx:key="{{list_all}}"> <view class='item_lis' bindtap='opendetails' data-wzid="{{item.wzid}}" > <image class='item_lis_img' src='{{item.url}}'></image> <view class='info_wrap'> <view class='item_lis_bt'>{{item.bt}}</view> <view class='info_lis'>格式:{{item.format}}</view> <view class='info_lis'>大小:{{item.size}}</view> <view class='info_lis'>下载:{{item.downl}}</view> <view class='info_lis'>{{item.time}}</view> </view> </view> </block> </view>