微信開發之下拉重新整理上拉載入更多
微信小程式實現“下拉重新整理、上拉載入更多”功能,有兩種實現方式:
方式1:利用頁面的onPullDownRefresh和onReachBottom實現:
-
onPullDownRefresh
: 下拉重新整理- 監聽使用者下拉重新整理事件。
- 需要在
app.json
的window
選項中或頁面配置中開啟enablePullDownRefresh
。 - 當處理完資料重新整理後,
wx.stopPullDownRefresh
可以停止當前頁面的下拉重新整理。
-
onReachBottom
: 上拉觸底
index.json:
index.wxml:
index.js 重寫系統回撥函式onPullDownRefresh和onReachBottom:
執行效果顯示:可以執行onPullDownRefresh,但始終無法執行onReachBottom。經過一番折騰,最後發現:
如果頁面的內容未滿一屏,上拉的時候就無法觸發onReachBottom。
那麼有沒有其他替代方案呢?答案就是使用scrollview。
方式2:利用scrollview的屬性bindscrolltoupper 和 bindscrolltolower 實現。
wxml示例程式碼:
<scroll-view bindscroll="scroll"
bindscrolltolower="lower"
bindscrolltoupper="upper"
bindtouchstart="start"
bindtouchend="end" >
<view style="width:100%;height:100%" bindtouchmove="move">
<block wx:for="{{words}}">
<view class="item-style">{{item}}</view>
</block>
</view>
</scroll-view>
然後,在js檔案編寫函式,處理相應事件即可。
總結:
1、如果單純實現“下拉重新整理”,請使用頁面的滾動,而不是 scroll-view
,這樣也能通過點選頂部狀態列回到頁面頂部
2、使用頁面的enablePullDownRefresh屬性,不能對頁面內某一區域/控制元件實現“下拉重新整理、上拉載入更多”功能。
3、若要實現“下拉重新整理、載入更多”,建議使用scrollview,因為可隨意定義位置、寬高。
相關文章
- Flutter listview下拉重新整理 上拉載入更多FlutterView
- UITableView:下拉重新整理和上拉載入更多UIView
- Flutter下拉重新整理,上拉載入更多資料Flutter
- ListView下拉重新整理,上拉自動載入更多View
- Flutter ListView封裝,下拉重新整理、上拉載入更多FlutterView封裝
- Flutter 下拉重新整理上拉載入更多Flutter
- 上拉重新整理,下拉載入
- Flutter——下拉重新整理,上拉載入Flutter
- Flutter入門進階之旅(十五)ListView下拉重新整理&上拉載入更多FlutterView
- HarmonyOS 下拉重新整理 上拉載入更多 第二種實現方式
- flutter - listView 下拉重新整理 上拉載入FlutterView
- 上拉載入下拉重新整理瞭解下
- 下拉重新整理--載入更多
- Flutter 實現下拉重新整理&上拉載入Flutter
- RecyclerView下拉重新整理 上拉載入 原理DemoView
- 如何實現上拉載入,下拉重新整理?
- 【微信小程式】scroll-view 的上拉載入和下拉重新整理微信小程式View
- 淺談微信小程式中的下拉重新整理和上拉載入微信小程式
- uni-app | 上拉載入和下拉重新整理探索APP
- 04-上拉載入更多
- recyclerView的側拉效果。上拉載入。下拉重新整理,點選事件等等View事件
- 入門微信小程式(含實戰) [第九篇] -- 下拉重新整理和上拉載入微信小程式
- 下拉重新整理,上拉載入外掛mescroll原始碼分析原始碼
- vue 實現上拉載入下拉重新整理(思路賊清晰)Vue
- vue載入更多,上拉重新整理 VueScroller 簡單化思維Vue
- mui上拉載入更多的使用UI
- vue上拉載入更多元件Vue元件
- 搭建自己的直播平臺,RecycleView下拉重新整理,上拉載入View
- H5下拉重新整理和上拉載入實現原理淺析H5
- 移動端用下拉重新整理的方式實現上拉載入
- 分享輪子-flutter下拉重新整理上拉載入Flutter
- Flutter之封裝一個下拉重新整理上拉載入的listviewFlutter封裝View
- flutter - RefreshIndicator實現下拉重新整理、上拉載入 | 掘金技術徵文FlutterIndicator
- 為RecyclerView新增分頁載入(上拉載入更多)功能View
- ListView分頁顯示 上拉載入更多View
- 給RecyclerView擴充套件下拉重新整理上拉載入View套件
- Swift iOS : 上拉重新整理或者下拉重新整理SwiftiOS
- vue-better-scroll 一個vue的上拉載入下拉重新整理外掛Vue