小程式中應該如何實現上拉載入？

2021-09-03 02:17:16 字數 1592 閱讀 5320

實現要點:

onreachbottom宣告週期

使用隨機數觸發子元件的oberserver

第一步: 在page頁面中維護乙個引數，的onreacebottom中。改變該引數。

data:


,
onreachbottom:


function())},
第二步：向子元件傳遞

more


="}"


/>
第三步：子元件接收properties（因為元件沒有onreachbottom的生命週期鉤子），並在more發生改變的時候，通過observer觸發函式

more:


,
觸發的函式測試:

methods:


,oncancel


(event),)},}
這時候發現，頁面拉到底部的時候，只會觸發一次，第二次不會觸發，這是因為observer只會在more這個引數發生改變的時候，才會執行。所以這裡的more不能使用boolean型別的值，而應該使用隨機數來解決這個問題

第四步：生成隨機數

在until裡面封裝乙個生成隨機數的函式：

const chars =


['1'


,'2'


,'3'


,'4'


,'5'


,'6'


,'7'


,'8'


,'9'


,'0'


,'a'


,'b'


,'c'


,'d'


,'e'


,'f'


,'g'


,'h'


,'i'


,'j'


,'k'


,'l'


,'m'


,'n'


,'o'


,'p'


,'q'


,'r'


,'s'


,'t'


,'u'


,'v'


,'w'


,'x'


,'y'


,'z'


]const


random


=function


getrandom


(n)return res


}export
第五步: 在page頁使用隨機函式

引入：

import


from


'../../util/common.js'
改寫page頁面的more

data:


,
onreachbottom:


function())},
到這裡就實現了每次下拉到底部都會執行函式了。

小程式 上拉載入

一 首先，固定乙個包含列表資料的view高度，讓它裡面列表的資料溢位可以滾動 scroll y lower threshold 100 bindscrolltolower scrolltolower style height 100vh wx for wx key style height 40px...

mpvue實現小程式上拉重新整理下拉載入

個人看了好多資料，發現寫的並不是很全，走了很多彎路，故記下來自己下此做的時候少走彎路，也給看到的你們提供一些思路，話不多說。下拉重新整理配置 根據專案需求選擇是進行全域性配置還是單頁面配置。2.頁面配置在對應main.json中 enablepulldownrefresh true,3.上拉重新整理...

微信小程式 上拉載入

oa系統中，領導要對員工的的申請進行審批，如此多的員工，不可能一下子都顯示出來，需要後台進行分頁，每次上拉觸底載入一頁，每次上拉觸底載入一頁。注 因為各方面原因，不能上傳源 只提供思路和偽 data onload function options onreachbottom function ini...