1. 程式人生 > >小程式上拉載入內容onReachBottom

小程式上拉載入內容onReachBottom

今天做小程式,需要做上拉載入更多內容的功能,如下圖

用到了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>