微信小程式預設下拉重新整理和自定義下拉重新整理的方式

2021-10-11 20:50:48 字數 633 閱讀 2318

1.預設下拉重新整理

在指定頁面對應的.json配置檔案中加入:

"enablepulldownrefresh": true,

"backgroundtextstyle": "dark"

在對應的.js檔案中,寫入onpulldownrefresh,如果存在則替換就好了

/**

* 頁面相關事件處理函式--監聽使用者下拉動作

*/onpulldownrefresh: function () ,1500);

},

2.自定義下拉重新整理

在.wxml中,需要下拉重新整理的區域外部套上乙個scroll-view,如果不好使,給scroll-view設定乙個高度

refresher-enabled:開啟自定義下拉重新整理 預設false

refresher-triggered:設定當前下拉重新整理狀態,true 表示下拉重新整理已經被觸發,false 表示下拉重新整理未被觸發

bindrefresherrefresh:自定義下拉重新整理被觸發 

在.js中寫入refresh,內容根據實際需求來寫

refresh: function())

},1000);

},

微信小程式自定義下拉重新整理

首先是布局檔案 wxml布局檔案 height 100 scroll y bindscroll scorll 監聽布局touch事件 column bindtouchstart start bindtouchend end bindtouchmove move 重新整理狀態view height p...

微信小程式下拉重新整理

使用了幾個方案,發現幾個注意點需要注意一下 方案一 整個布局只使用乙個scroll view,類目和列表放到該控制項下,這種狀態下重新整理可以,但是類目不能固定在頂部 方案二 整個布局使用乙個scroll view,裡面再巢狀使用scroll view,這種狀態下上拉幅度大的時候也會觸發下拉重新整理...

微信小程式 下拉重新整理

步驟一注意 enablepulldownrefresh 允許下拉重新整理 backgroundtextstyle 重新整理動畫中那個點的顏色 ios 值可以為dark light 步驟二 js檔案配置 頁面相關事件處理函式 監聽使用者下拉動作 onpulldownrefresh function 下...