微信小程序怎么實現觸底加載

這篇文章主要介紹“微信小程序怎么實現觸底加載”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“微信小程序怎么實現觸底加載”文章能幫助大家解決問題。

1.首先要從后端也就是服務器上獲取分頁的數據，如：每頁多少條數據，一共分了多少頁，大致內容如下圖

既然有了數據，那就要在微信端去獲取數據了

2.先不考慮分頁，把獲取到的數據直接顯示到微信端

// pages/test/test.js
//引入封裝請求路徑的模塊
const orderApi = require('../../api/order')

//設置當前頁數和總頁數
var nowPage = 2;
var totalPage;
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    waitOrder:[]
  },
  tapPaying: function (options) {
    //初始化
    nowPage = 2
    //查詢的方法把查詢路徑統(tǒng)一封裝在orderApi，userOrder是封裝的路徑名
    //status: "wait", merchant: wx.getStorageSync('user').mId 是參數
    orderApi.userOrder({ status: "wait", merchant: wx.getStorageSync('user').mId }).then((res) => {
      console.log(res)
      //獲取總頁數
      totalPage = res.data.totalPages
      this.setData({
      //把查詢到的值賦給數組
        waitOrder: res.data
      })
    }).catch((err) => {
      console.log(err)
    })
  },
  /**
   * 生命周期函數--監(jiān)聽頁面加載
   */
  onLoad: function (options) {
    this.tapPaying()
  },
  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {

  },
})

3.wxml文件

<!--pages/test/test.wxml-->
<view class="name" wx:for="{{waitOrder}}" wx:for-key="index" wx:for-item="ev">
   {{ev.customerName}}
   {{waitOrder.length}}
</view>

xcss樣式就省略

4.前端顯示如下：

5.寫觸底函數的方法

loadOtherWaitOrder() {
    if(nowPage <= totalPage){
      orderApi.userOrder({ 
        status: "wait", 
        merchant: wx.getStorageSync('user').mId,
        page:nowPage,
      }).then((res) => {
        //每次執(zhí)行自加1
        nowPage += 1
        let waitOrder = res.data.content
       
        let oldWaitOrder = this.data.waitOrder
        //把獲取的新數組和舊的數組合并在一起
        oldWaitOrder = oldWaitOrder.concat(waitOrder)
        this.setData({
          waitOrder: oldWaitOrder
        })
      }).catch((err) => {
        console.log(err)
      })
    }
 },

6.把寫的觸底函數的方法放入到onReachBottom: function () {} 頁面上拉觸底事件的處理函數中。

/**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {
    this.loadOtherWaitOrder()
  },

7.現在在觸底顯示

關于“微信小程序怎么實現觸底加載”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識，可以關注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。