小程序模板網(wǎng)

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

發(fā)布時間:2018-06-11 08:29 所屬欄目:小程序開發(fā)教程

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

先來張效果圖

效果預覽 
不用scroll-view組件 
在需要的頁面打開配置(不需要在全局配置,我用的是wepy,不需要在app.wpy寫)

 

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

來個長長的列表

 

  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('上拉加載下一頁')
  6. }

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

 

  1. onPullDownRefresh() {
  2. console.log('下拉刷新列表')
  3. // 5秒模擬數(shù)據(jù)加載
  4. setTimeout(function () {
  5. // 不加這個方法真機下拉會一直處于刷新狀態(tài),無法復位
  6. wepy.stopPullDownRefresh()
  7. }, 5000)
  8. }
  9. onReachBottom() {
  10. console.log('上拉加載下一頁')
  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: '測試上拉下拉',
  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. // 不加這個方法真機下拉會一直處于刷新狀態(tài),無法復位
  40. wepy.stopPullDownRefresh()
  41. }, 5000)
  42. }
  43. onReachBottom() {
  44. console.log('上拉加載下一頁')
  45. wepy.showToast({
  46. title: '上拉加載下一頁',
  47. icon: 'none',
  48. mask: true,
  49. duration: 1000
  50. })
  51. }
  52. }
  53. </script>
  54.  
  55. <style lang="less">
  56. </style>


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/24525.html 復制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢