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

這篇文章主要介紹了小程序wepy上拉下拉如何解決的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇小程序wepy上拉下拉如何解決文章都會有所收獲，下面我們一起來看看吧。

列表上拉下拉加載數據是再常見不過的功能，第一個想到的是scroll-view組件，里面有兩個事件，分別是bindscrolltoupper（拉到最頂部）和bindscrolltolower（拉到最底部），用bindscrolltoupper實現上拉效果極差，稍微滑一下就觸發，也就是說一言不合就下拉刷新列表，體驗很差，網上百度了很久說是scroll-view不能和onPullDownRefresh聯用，不明覺厲，最后總結一下終結辦法

不用scroll-view組件 
在需要的頁面打開配置（不需要在全局配置，我用的是wepy，不需要在app.wpy寫）

config = {navigationBarTitleText: '測試上拉下拉',// 不要把true寫成 'true'enablePullDownRefresh: true,// 不配成dark的話三個加載中的點會看不到，其實是出來了，只是三個點是白色的，如果你的頁面背景也是白的，那就看不出效果了backgroundTextStyle: 'dark'}

來個長長的列表

<template><view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i"><view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j"><view wx:if="{{i <= j}}">{{i}} * {{j}} = {{i * j}}</view></view></view></template>

關鍵事件

onPullDownRefresh() {console.log('下拉刷新列表')}onReachBottom() {console.log('上拉加載下一頁')}

wx.stopPullDownRefresh()

onPullDownRefresh() {console.log('下拉刷新列表')// 5秒模擬數據加載setTimeout(function () {// 不加這個方法真機下拉會一直處于刷新狀態，無法復位wepy.stopPullDownRefresh()}, 5000)}onReachBottom() {console.log('上拉加載下一頁')}

完整代碼

<template><view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i"><view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j"><view wx:if="{{i <= j}}">{{i}} * {{j}} = {{i * j}}</view></view></view></template> <script>import wepy from 'wepy' export default class Refresh extends wepy.page {config = {navigationBarTitleText: '測試上拉下拉',enablePullDownRefresh: true,backgroundTextStyle: 'dark'}components = {}data = {} computed = {} methods = {} events = { }onLoad() {}onPullDownRefresh() {console.log('下拉刷新列表')setTimeout(function () {// 不加這個方法真機下拉會一直處于刷新狀態，無法復位wepy.stopPullDownRefresh()}, 5000)}onReachBottom() {console.log('上拉加載下一頁')wepy.showToast({title: '上拉加載下一頁',icon: 'none',mask: true,duration: 1000})}}</script> <style lang="less"></style>

關于“小程序wepy上拉下拉如何解決”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“小程序wepy上拉下拉如何解決”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。