支付宝小程序中使用 scroll-view 实现分页下拉加载

yunchong_zhao 2020-07-22 20:40:36

577

分类专栏：微信小程序文章标签：小程序

本文链接：https://blog.csdn.net/yunchong_zhao/article/details/107522551

版权

今天不想说太多话有点累了，和微信小程序很想
scroll-view的用法
index.aml 必须给scroll-view 一个高度才可以触发滚动的方法
onScrollToLower 滚动到底部触发事件

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

index.js

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