小程式上拉載入內容onReachBottom
阿新 • • 發佈:2019-02-11
今天做小程式,需要做上拉載入更多內容的功能,如下圖
用到了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>