小程序无限滚动问题原理解析

admin

1.在需要做无限滚动（翻页）的时候，首选要有一个初始值，即当前页（第一页，page=1），每页加载多少条可以在后端处理；
2.判断页面滚动到底部有两种方式，根据场景不同；

• 1.注册页面时：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/page.html
• onReachBottom：页面上拉触底事件的处理函数
• 此函数再滑动到界面底部的时候会被触发一次，所以优先使用这个函数；
• 
  
• 2.视图容器：https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html
• bindscrolltolower：滚动到底部/右边，会触发 scrolltolower 事件
• 此函数当界面滚动到底部/右边的时候，会触发多次，需要开发者自行添加标志，以便处理成只加载一次；
• 解决此问题的原理：
• WXML
• 1. <scroll-view scroll-y bindscrolltolower="{{hasdata == '0' ? '' : 'getMore'}}" >
     
  2.         <block wx:for="{{itemList}}" wx:key="key">
     
  3.                 <view>{{item.xxxxxxxxxxxxx}}</view>
     
  4.         </block>
     
  5. </scroll-view>

  复制代码
  
  
• JS
• 1. Page({
     
  2.         data: {
     
  3.                 flag:0,                //初始化滚动加载状态
     
  4.                 hasdata: 1,        //初始化是否有数据
     
  5.                 page: 1
     
  6.         },
     
  7.         getMore: function (e) {
     
  8.             var self = this;
     
  9.             var page = self.data.page;
     
  10.             if (self.data.flag == 1) {        //如果滚动加载状态为1则退出（已经滚动过）
      
  11.               return;
      
  12.             }
      
  13.             self.setData({        //设置滚动状态为1
      
  14.               flag:1
      
  15.             })
      
  16. 
      
  17.                 wx.request({
      
  18.                   url: 'test.php', //请求数据地址
      
  19.                   data: {
      
  20.                      page: page + 1,        //当前页加1，即下一页
      
  21.                   },
      
  22.                   success: function(res) {
      
  23.                           self.setData({
      
  24.                                   itemList: self.data.itemList.concat(data.data),                //如果请求成功并返回了数据，就将之前和数据和此次返回的数据一并渲染到前端界面上
      
  25.                                   page: self.data.page + 1,                                                        //如果请求成功则在data中存储当前页加1
      
  26.                                   flag:0                                                                                                 //重新将滚动状态设置为0，以便下次滚动到底部的时候继续执行本操作
      
  27.                           })
      
  28.                           if (res.data.length == 0) {                                                                //如果返回的数据为空，即没有更多数据了，则将hasdata的值设置为0，不在执行滚动函数
      
  29.                         self.setData({
      
  30.                           hasdata: '0'
      
  31.                         })
      
  32.                       }
      
  33.                   }
      
  34.                 })
      
  35.         }
      
  36. })

  复制代码