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

2021-09-24 05:18:36 字數 971 閱讀 2920

個人看了好多資料,發現寫的並不是很全,走了很多彎路,故記下來自己下此做的時候少走彎路,也給看到的你們提供一些思路,話不多說。

下拉重新整理配置

根據專案需求選擇是進行全域性配置還是單頁面配置

2. 頁面配置在對應main.json

"enablepulldownrefresh": true,
3. 上拉重新整理和下拉載入的事件和data ,  methods 是同級的

下拉重新整理事件

onpulldownrefresh ()

上拉載入事件

onreachbottom ()

關閉下拉重新整理的動畫

wx.stoppulldownrefresh( )

個人認為不需要使用這個關閉下拉重新整理動畫,因為更新資料操作不需要禁止

個人寫訂單的一些心得:

很重要的一點:網路資料請求要考慮請求失敗情況

1. 上拉一直拉index= 1 的資料,不需要禁止

2.上拉細節完善:

1>下拉更新資料 < 每次要拉取資料的數量 ,提示不需要上拉載入

2>上拉載入的資料 == 0 不需要拉取

3.請求成功之後再改變index的值,否則請求失敗之後,這個index值已經更改回缺少資料

4.拉取資料不可以不改變index的值,卻只改變context的值,這樣會重複拉取已經拉取過的資料,進行不必要操作

5.當保證請求回來的資料不為空的時候(也許因網路問題),在改變index,保證不會缺少資料

6.考慮返回的資料為空陣列或空物件,做好判斷

好多情況都是我程老師考慮到的,在此特別感謝程老師,謝謝您!

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

筆者這邊上拉載入使用的函式是 onreachbottom,沒有使用scroll view data 生命週期函式 監聽頁面載入 onload function options 商品 goods function that,urls function error 頁面上拉觸底事件的處理函式 onrea...

小程式 上拉載入

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

微信小程式上拉載入,下拉重新整理

首先在對應的json檔案中開啟 enablepulldownrefresh true首先介紹上拉載入的方法 1.data中定義 data 2.請求資料方法 getcompanylist data success res if res.data.items 0 else let listdata th...