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

列表上拉下拉加載數(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é)辦法

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

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

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

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

關(guān)鍵事件

1. onPullDownRefresh() {
2. console.log('下拉刷新列表')
3. }
4. onReachBottom() {
5. console.log('上拉加載下一頁(yè)')
6. }

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

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

完整代碼

1. <template>
2. <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
3. <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
4. <view wx:if="{{i <= j}}">
5. {{i}} * {{j}} = {{i * j}}
6. </view>
7. </view>
8. </view>
9. </template>
10.  
11. <script>
12. import wepy from 'wepy'
13.  
14. export default class Refresh extends wepy.page {
15. config = {
16. navigationBarTitleText: '測(cè)試上拉下拉',
17. enablePullDownRefresh: true,
18. backgroundTextStyle: 'dark'
19. }
20. components = {
21. }
22. data = {
23. }
24.  
25. computed = {
26. }
27.  
28. methods = {
29. }
30.  
31. events = {
32.  
33. }
34. onLoad() {
35. }
36. onPullDownRefresh() {
37. console.log('下拉刷新列表')
38. setTimeout(function () {
39. // 不加這個(gè)方法真機(jī)下拉會(huì)一直處于刷新?tīng)顟B(tài)，無(wú)法復(fù)位
40. wepy.stopPullDownRefresh()
41. }, 5000)
42. }
43. onReachBottom() {
44. console.log('上拉加載下一頁(yè)')
45. wepy.showToast({
46. title: '上拉加載下一頁(yè)',
47. icon: 'none',
48. mask: true,
49. duration: 1000
50. })
51. }
52. }
53. </script>
54.  
55. <style lang="less">
56. </style>