微信小程序實現觸底加載
更新時間：2022年06月30日 17:11:32 作者：與黑夜為伍
這篇文章主要為大家詳細介紹了微信小程序實現觸底加載，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
現在來看小程序還沒有使用pc端的那種分頁格式，現在微信小程序上分頁一般使用觸底加載來實現分頁的，下面就來分享一個觸底加載的實現方式。
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.現在在觸底顯示
到此微信小程序觸底加載實現完成。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Javascript單元測試框架QUnitjs詳細介紹,需要的朋友可以參考下2014-05-05
這篇文章主要介紹了JS動態(tài)顯示表格上下frame的方法,涉及javascript中顯示表格frame的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
相信現在的很多程序員或多或少的都會寫JS，大部分也知道JS是基于原型的語言，但是如果問及JS原生對象（Object,Function,Array,Date等）的這個原型鏈長什么樣子？估計能回答出來的人就少了，所以這篇文章就給大家詳細介紹下，有需要的可以參考借鑒。2016-10-10
本文給大家介紹js調用百度地圖的方法以及調用百度地圖的搜索功能，有需要的朋友可以跟著腳本之家的小編一起學習2015-09-09
javascript中的對象繼承的方法有很多，在接下來的文章中為大家介紹下使用apply方法是如何實現的2013-12-12
這篇文章主要介紹了微信小程序提交form操作,結合實例形式分析了微信小程序開發(fā)中使用form組件實現數據提交與數據處理相關操作技巧,需要的朋友可以參考下2018-12-12
這篇文章主要介紹了jquery動態(tài)添加刪除(tr/td)的方法,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了原生js實現貪食蛇小游戲的思路詳解,，文中給大家寫出了注釋，幫助大家理解代碼，需要的朋友可以參考下2019-11-11
這篇文章主要為大家詳細介紹了ionic實現下拉刷新載入數據功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
開發(fā)中常見的組件主要分為公共組件和頁面組件兩種,因此注冊組件的方式也分為兩種全局注冊和局部注冊,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-06-06