小程序wepy上拉下拉解決方案

2020-09-27|HiShop

導讀：列表上拉下拉加載數(shù)據(jù)是再常見不過的功能，第一個想到的是scroll-view組件，里面有兩個事件，分別是bindscrolltoupper（拉到最頂部）和bindscrolltolower（拉到最底部），用bindscrolltoupper實現(xiàn)...

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

效果預(yù)覽
不用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>

關(guān)鍵事件

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

在微信開發(fā)者工具跑起來沒什么問題，在真機跑一下，三個點下來以后竟然不上去了，很尷尬，最后在參考文章第二篇的評論里一位網(wǎng)友的回答解決了這個問題，手動讓三個點彈回去，wx.stopPullDownRefresh()，小程序API里有，可以點這里自行看一下

onPullDownRefresh() {
console.log('下拉刷新列表')
// 5秒模擬數(shù)據(jù)加載
setTimeout(function () {
// 不加這個方法真機下拉會一直處于刷新狀態(tài)，無法復(fù)位
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 () {
// 不加這個方法真機下拉會一直處于刷新狀態(tài)，無法復(fù)位
wepy.stopPullDownRefresh()
}, 5000)
}
onReachBottom() {
console.log('上拉加載下一頁')
wepy.showToast({
title: '上拉加載下一頁',
icon: 'none',
mask: true,
duration: 1000
})
}
}
</script>
<style lang="less">
</style>