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

這篇文章主要介紹了小程序wepy上拉下拉如何解決的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇小程序wepy上拉下拉如何解決文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

列表上拉下拉加載數(shù)據(jù)是再常見(jiàn)不過(guò)的功能，第一個(gè)想到的是scroll-view組件，里面有兩個(gè)事件，分別是bindscrolltoupper（拉到最頂部）和bindscrolltolower（拉到最底部），用bindscrolltoupper實(shí)現(xiàn)上拉效果極差，稍微滑一下就觸發(fā)，也就是說(shuō)一言不合就下拉刷新列表，體驗(yàn)很差，網(wǎng)上百度了很久說(shuō)是scroll-view不能和onPullDownRefresh聯(lián)用，不明覺(jué)厲，最后總結(jié)一下終結(jié)辦法

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

config = {navigationBarTitleText: '測(cè)試上拉下拉',// 不要把true寫成 'true'enablePullDownRefresh: true,// 不配成dark的話三個(gè)加載中的點(diǎn)會(huì)看不到，其實(shí)是出來(lái)了，只是三個(gè)點(diǎn)是白色的，如果你的頁(yè)面背景也是白的，那就看不出效果了backgroundTextStyle: 'dark'}

來(lái)個(gè)長(zhǎng)長(zhǎng)的列表

<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>

關(guān)鍵事件

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

wx.stopPullDownRefresh()

onPullDownRefresh() {console.log('下拉刷新列表')// 5秒模擬數(shù)據(jù)加載setTimeout(function () {// 不加這個(gè)方法真機(jī)下拉會(huì)一直處于刷新?tīng)顟B(tài)，無(wú)法復(fù)位wepy.stopPullDownRefresh()}, 5000)}onReachBottom() {console.log('上拉加載下一頁(yè)')}

完整代碼

<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: '測(cè)試上拉下拉',enablePullDownRefresh: true,backgroundTextStyle: 'dark'}components = {}data = {} computed = {} methods = {} events = { }onLoad() {}onPullDownRefresh() {console.log('下拉刷新列表')setTimeout(function () {// 不加這個(gè)方法真機(jī)下拉會(huì)一直處于刷新?tīng)顟B(tài)，無(wú)法復(fù)位wepy.stopPullDownRefresh()}, 5000)}onReachBottom() {console.log('上拉加載下一頁(yè)')wepy.showToast({title: '上拉加載下一頁(yè)',icon: 'none',mask: true,duration: 1000})}}</script> <style lang="less"></style>

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