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

2021-08-28 14:37:55 字數 860 閱讀 6493

上拉重新整理和下拉加載有兩種方式可以實現:

1.使用scroll-view元件進行操作,使用自帶的scrolltoupper和scrolltolower事件可以實現。適合頁面區域性的上拉下拉。

附上文件:

2.使用page頁面事件處理函式 onpulldownrefresh() 下拉重新整理 和 onreachbottom()上拉觸底事件 可以進行資料上拉重新整理和下拉載入的效果。但是注意,此為頁面的上拉和下拉,並不適合區域性,所以文件也寫了跟scroll-view元件不能相容在乙個頁面操作處理。

附上文件:

ps:兩種版本的文件看著真的彆扭。

onpulldownrefresh()

監聽使用者下拉重新整理事件。

選項中或頁面配置中開啟enablepulldownrefresh

可以通過wx.startpulldownrefresh觸發下拉重新整理,呼叫後觸發下拉重新整理動畫,效果與使用者手動下拉重新整理一致。

當處理完資料重新整理後,wx.stoppulldownrefresh可以停止當前頁面的下拉重新整理。

onpulldownrefresh: function() ,
onreachbottom()

監聽使用者上拉觸底事件。

選項中或頁面配置中設定觸發距離onreachbottomdistance

在觸發距離內滑動期間,本事件只會被觸發一次。

onreachbottom: function() 

},

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

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

微信小程式下拉重新整理和上拉載入更多

因為專案裡面,經常會用到此功能,所以我們封裝乙個外掛程式。裡面應用到vant的元件 1.在compontent裡面建立乙個檔案,名字隨意 布局檔案 message scroll view client pool list scroll y lower threshold 1 bindtouchsta...

微信小程式上拉載入更多和下拉重新整理

獲取商品列表 async getgoodslist 關閉下拉重新整理 wx.stoppulldownrefresh 生命週期函式 監聽頁面載入 onload function options 頁面上拉觸底事件的處理函式 onreachbottom function fail complete els...