上拉重新整理和下拉加載有兩種方式可以實現:
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...