微信小程序?qū)崿F(xiàn)觸底加載
更新時(shí)間：2022年06月30日 17:11:32 作者：與黑夜為伍
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)觸底加載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
現(xiàn)在來看小程序還沒有使用pc端的那種分頁格式，現(xiàn)在微信小程序上分頁一般使用觸底加載來實(shí)現(xiàn)分頁的，下面就來分享一個(gè)觸底加載的實(shí)現(xiàn)方式。
1.首先要從后端也就是服務(wù)器上獲取分頁的數(shù)據(jù)，如：每頁多少條數(shù)據(jù)，一共分了多少頁，大致內(nèi)容如下圖
既然有了數(shù)據(jù)，那就要在微信端去獲取數(shù)據(jù)了
2.先不考慮分頁，把獲取到的數(shù)據(jù)直接顯示到微信端
// pages/test/test.js
//引入封裝請求路徑的模塊
const orderApi = require('../../api/order')
//設(shè)置當(dāng)前頁數(shù)和總頁數(shù)
var nowPage = 2;
var totalPage;
Page({
? /**
? ?* 頁面的初始數(shù)據(jù)
? ?*/
? data: {
? ? waitOrder:[]
? },
? tapPaying: function (options) {
? ? //初始化
? ? nowPage = 2
? ? //查詢的方法把查詢路徑統(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)
? ? ? //獲取總頁數(shù)
? ? ? totalPage = res.data.totalPages
? ? ? this.setData({
? ? ? //把查詢到的值賦給數(shù)組
? ? ? ? waitOrder: res.data
? ? ? })
? ? }).catch((err) => {
? ? ? console.log(err)
? ? })
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面加載
? ?*/
? onLoad: function (options) {
? ? this.tapPaying()
? },
? /**
? ?* 頁面上拉觸底事件的處理函數(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.寫觸底函數(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.把寫的觸底函數(shù)的方法放入到onReachBottom: function () {} 頁面上拉觸底事件的處理函數(shù)中。
/**
? ?* 頁面上拉觸底事件的處理函數(shù)
? ?*/
? onReachBottom: function () {
? ? this.loadOtherWaitOrder()
? },7.現(xiàn)在在觸底顯示
到此微信小程序觸底加載實(shí)現(xiàn)完成。
以上就是本文的全部內(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)列表下拉刷新上拉加載
- 微信小程序（六）：列表上拉加載下拉刷新示例
- 詳解微信小程序開發(fā)之下拉刷新 上拉加載
- 微信小程序列表渲染功能之列表下拉刷新及上拉加載的實(shí)現(xiàn)方法分析
相關(guān)文章
微信小程序?qū)崿F(xiàn)時(shí)間進(jìn)度條功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)時(shí)間進(jìn)度條功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
這篇文章主要介紹了?typeScript入門基礎(chǔ)，TypeScript?是由微軟開發(fā)的開源、跨平臺(tái)的編程語言，是?javaScript?的超集，最終被編譯為?javaScript代碼。常常被簡稱為TS支持JS、ES語法，下文將繼續(xù)其他基礎(chǔ)介紹，需要的朋友可以參考一下2022-02-02
JavaScript實(shí)現(xiàn)鼠標(biāo)滑過圖片變換效果的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)鼠標(biāo)滑過圖片變換效果的方法,涉及javascript控制鼠標(biāo)事件及樣式變換的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
layer擴(kuò)展打開/關(guān)閉動(dòng)畫的方法
今天小編就為大家分享一篇layer擴(kuò)展打開/關(guān)閉動(dòng)畫的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
前一段時(shí)間看了一本javascript的書，書名為Javascript DOM 高級(jí)程序設(shè)計(jì) 由【加】Jeffrey Sambells和【美】2009-06-06
文檔對(duì)象模型 (DOM) 表示 HTML 文檔的結(jié)構(gòu),導(dǎo)航或“遍歷”此結(jié)構(gòu)是 Web 開發(fā)的基本方面,使開發(fā)人員能夠在網(wǎng)頁上選擇、修改、刪除或添加內(nèi)容,本文深入研究了使用 JavaScript 進(jìn)行 DOM 遍歷的藝術(shù),提供了一個(gè)強(qiáng)大的工具包來處理各種遍歷場景2023-09-09
openlayers4.6.5實(shí)現(xiàn)距離量測和面積量測
這篇文章主要為大家詳細(xì)介紹了openlayers4.6.5實(shí)現(xiàn)距離量測和面積量測，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了Bootstrap3制作搜索框樣式的方法 的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07
js 將多個(gè)對(duì)象合并成一個(gè)對(duì)象 assign方法的實(shí)現(xiàn)
這篇文章主要介紹了js 將多個(gè)對(duì)象合并成一個(gè)對(duì)象 assign方法的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
試想一下：出現(xiàn)了某個(gè)bug，有人用幾分鐘就搞定了，有人用了半天或者一天都找不到原因所在。你愿意當(dāng)前者還是后者呢？想當(dāng)前者的就請好好看完本篇文章吧。文中涉及較多Gif演示動(dòng)畫請注意。2016-07-07