微信小程序?qū)崿F(xiàn)觸底加載
更新時(shí)間：2022年06月30日 17:11:32 作者：與黑夜為伍
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)觸底加載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
現(xiàn)在來(lái)看小程序還沒(méi)有使用pc端的那種分頁(yè)格式，現(xiàn)在微信小程序上分頁(yè)一般使用觸底加載來(lái)實(shí)現(xiàn)分頁(yè)的，下面就來(lái)分享一個(gè)觸底加載的實(shí)現(xiàn)方式。
1.首先要從后端也就是服務(wù)器上獲取分頁(yè)的數(shù)據(jù)，如：每頁(yè)多少條數(shù)據(jù)，一共分了多少頁(yè)，大致內(nèi)容如下圖
既然有了數(shù)據(jù)，那就要在微信端去獲取數(shù)據(jù)了
2.先不考慮分頁(yè)，把獲取到的數(shù)據(jù)直接顯示到微信端
// pages/test/test.js
//引入封裝請(qǐng)求路徑的模塊
const orderApi = require('../../api/order')
//設(shè)置當(dāng)前頁(yè)數(shù)和總頁(yè)數(shù)
var nowPage = 2;
var totalPage;
Page({
? /**
? ?* 頁(yè)面的初始數(shù)據(jù)
? ?*/
? data: {
? ? waitOrder:[]
? },
? tapPaying: function (options) {
? ? //初始化
? ? nowPage = 2
? ? //查詢(xún)的方法把查詢(xún)路徑統(tǒng)一封裝在orderApi，userOrder是封裝的路徑名
? ? //status: "wait", merchant: wx.getStorageSync('user').mId 是參數(shù)
? ? orderApi.userOrder({ status: "wait", merchant: wx.getStorageSync('user').mId }).then((res) => {
? ? ? console.log(res)
? ? ? //獲取總頁(yè)數(shù)
? ? ? totalPage = res.data.totalPages
? ? ? this.setData({
? ? ? //把查詢(xún)到的值賦給數(shù)組
? ? ? ? waitOrder: res.data
? ? ? })
? ? }).catch((err) => {
? ? ? console.log(err)
? ? })
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
? ?*/
? onLoad: function (options) {
? ? this.tapPaying()
? },
? /**
? ?* 頁(yè)面上拉觸底事件的處理函數(shù)
? ?*/
? 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.寫(xiě)觸底函數(shù)的方法
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
? ? ? ? //把獲取的新數(shù)組和舊的數(shù)組合并在一起
? ? ? ? oldWaitOrder = oldWaitOrder.concat(waitOrder)
? ? ? ? this.setData({
? ? ? ? ? waitOrder: oldWaitOrder
? ? ? ? })
? ? ? }).catch((err) => {
? ? ? ? console.log(err)
? ? ? })
? ? }
?},6.把寫(xiě)的觸底函數(shù)的方法放入到onReachBottom: function () {} 頁(yè)面上拉觸底事件的處理函數(shù)中。
/**
? ?* 頁(yè)面上拉觸底事件的處理函數(shù)
? ?*/
? onReachBottom: function () {
? ? this.loadOtherWaitOrder()
? },7.現(xiàn)在在觸底顯示
到此微信小程序觸底加載實(shí)現(xiàn)完成。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 微信小程序?qū)崿F(xiàn)觸底加載與下拉刷新的示例代碼
- 微信小程序?qū)崿F(xiàn)上拉加載功能示例【加載更多數(shù)據(jù)/觸底加載/點(diǎn)擊加載更多數(shù)據(jù)】
- 微信小程序 列表的上拉加載和下拉刷新的實(shí)現(xiàn)
- 微信小程序 詳解下拉加載與上拉刷新實(shí)現(xiàn)方法
- 微信小程序下拉加載和上拉刷新兩種實(shí)現(xiàn)方法詳解
- 微信小程序 scroll-view實(shí)現(xiàn)上拉加載與下拉刷新的實(shí)例
- 微信小程序?qū)崿F(xiàn)列表下拉刷新上拉加載
- 微信小程序（六）：列表上拉加載下拉刷新示例
- 詳解微信小程序開(kāi)發(fā)之下拉刷新 上拉加載
- 微信小程序列表渲染功能之列表下拉刷新及上拉加載的實(shí)現(xiàn)方法分析
相關(guān)文章
Javascript單元測(cè)試框架QUnitjs詳細(xì)介紹
這篇文章主要介紹了Javascript單元測(cè)試框架QUnitjs詳細(xì)介紹,需要的朋友可以參考下2014-05-05
這篇文章主要介紹了JS動(dòng)態(tài)顯示表格上下frame的方法,涉及javascript中顯示表格frame的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
相信現(xiàn)在的很多程序員或多或少的都會(huì)寫(xiě)JS，大部分也知道JS是基于原型的語(yǔ)言，但是如果問(wèn)及JS原生對(duì)象（Object,Function,Array,Date等）的這個(gè)原型鏈長(zhǎng)什么樣子？估計(jì)能回答出來(lái)的人就少了，所以這篇文章就給大家詳細(xì)介紹下，有需要的可以參考借鑒。2016-10-10
js調(diào)用百度地圖及調(diào)用百度地圖的搜索功能
本文給大家介紹js調(diào)用百度地圖的方法以及調(diào)用百度地圖的搜索功能，有需要的朋友可以跟著腳本之家的小編一起學(xué)習(xí)2015-09-09
使用apply方法實(shí)現(xiàn)javascript中的對(duì)象繼承
javascript中的對(duì)象繼承的方法有很多，在接下來(lái)的文章中為大家介紹下使用apply方法是如何實(shí)現(xiàn)的2013-12-12
這篇文章主要介紹了微信小程序提交form操作,結(jié)合實(shí)例形式分析了微信小程序開(kāi)發(fā)中使用form組件實(shí)現(xiàn)數(shù)據(jù)提交與數(shù)據(jù)處理相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
jquery動(dòng)態(tài)添加刪除(tr/td)
這篇文章主要介紹了jquery動(dòng)態(tài)添加刪除(tr/td)的方法,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了原生js實(shí)現(xiàn)貪食蛇小游戲的思路詳解,，文中給大家寫(xiě)出了注釋?zhuān)瑤椭蠹依斫獯a，需要的朋友可以參考下2019-11-11
ionic實(shí)現(xiàn)下拉刷新載入數(shù)據(jù)功能
這篇文章主要為大家詳細(xì)介紹了ionic實(shí)現(xiàn)下拉刷新載入數(shù)據(jù)功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
開(kāi)發(fā)中常見(jiàn)的組件主要分為公共組件和頁(yè)面組件兩種,因此注冊(cè)組件的方式也分為兩種全局注冊(cè)和局部注冊(cè),本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-06-06