小程式wepy上拉下拉如何解決

2022-09-24 00:12:24 字數 495 閱讀 4660

列表上拉下拉載入資料是再常見不過的功能,第乙個想到的是scroll-view元件,裡面有兩個事件,分別是bindscrolltoupper(拉到最頂部)和bindscrolltolower(拉到最底部),用bindscrolltoupper實現上拉效果極差,稍微滑一下就觸發,也就是說一言不合就下拉重新整理列表,體驗很差,網上百度了很久說是scroll-view不能和onpulldownrefresh聯用,不明覺厲,最後總結一下終結辦法

先來張效果圖

效果預覽

不用scroll-view元件

在需要的頁面開啟配置(不需要在全域性配置,我用的是wepy,不需要在app.wpy寫)

來個長長的列表

關鍵事件

在微信開發者工具跑起來沒什麼問題,在真機跑一下,三個點下來以後竟然不上去了,很尷尬,最後在參考文章第二篇的評論裡一位網友的回答解決了這個問題,手動讓三個點彈回去,wx.stoppulldownrefresh(),小程式api裡有,可以點這裡自行看一下

完整**

小程式上拉下拉載入

上拉載入資料功能相當於pc端的分頁功能,兩者的區別在於 pc端的分頁功能是用請求來的新的資料替換舊的資料,而上拉載入是將原來的資料和新請來的資料進行拼接。實現步驟 1 在頁面js檔案中找到onreachbottom函式,當上拉觸底 預設距離底部50px 時會觸發此函式,如果想修改距離可以在json檔...

微信小程式 上拉下拉不會斷

先感謝 行漸遠 的分享 最開始看到效果圖,不錯,第一想到的是用做的,新增浮動層,然後設定浮動層高度。其實不然,大牛是 enablepulldownrefresh true 後,在頁面新增遮掩層,並跟隨底部滑動即可。感覺自己iq該充值了 上 news.wxml class top 下拉重新整理view...

微信小程式 重新整理上拉下拉不會斷詳細介紹

微信小程式 上拉下拉不會斷詳細介紹 最開始看到效果圖,不錯,第一想到的是用做的,新增浮動層,然後設定浮動層高度。其實不然,大牛是 程式設計客棧refresh true 後,在頁面新增遮掩層,並跟程式設計客棧隨底部滑動即可。感覺自己iq該充值了 上 news.wxml 下拉重新整理 news.wcss...