微信小程序 scroll-view 如何实现滚动下拉

在小程序开发过程中，经常会遇到列表滚动加载的效果。当整个页面需要滚动下拉的时候，我们可以借助小程序的生命周期函数 onReachBottom。但是当需要滚动下拉的内容为页面的一部分时，就需要用到 scroll-view 组件了。

在 scroll-view 中有一个函数 bindscrolltolower，会在滚动到底部/右边时触发。

实现原理：

设置一个请求发送的开关，当返回的数据小于设置的每页条数时，关闭请求。

具体实现方法如下：

wxml:

<scroll-view scroll-y="{{true}}" style="width:100%;margin-left:60rpx;height:600px;" bindscrolltolower="lower">
	这里包括着你写的代码
</scroll-view>

JS:

data:{
	page:1,   // 第一页
	list:[],  // 接受列表数据
	flag:true  // 防抖开关 防止用户不停的下拉
}
// 滚动到底触发的方法
lower(){
    if(this.data.flag){
      this.setData({
        flag:false
      })
      this.getData(); // 疯狂的请求的方法
    }
  },
  getData(){
    wx.request({
      url: "你的服务器请求地址",
      data:{
      		page:this.data.page,
      		limit:'10'   // 假设每页10条数据 
        }
      method: 'get',
      success: (result) => {
        var list=this.data.list;
        var page=this.data.page+1;
        list=list.concat(result.data.list);// 拼接回来的数据
      
        this.setData({
            list:list,
            page:page,
        })
        // 当回来的数据小于十条得时候 不让再请求了 否则继续请求
        if(result.data.list.length<10){
          this.setData({
            flag:false
          })
        }else{
          this.setData({
            flag:true
          })
        }
      }
    });
  }