微信小程序 scroll-view实现上拉加载与下拉刷新的实例

var url = "http://192.168.30.4:8080/gtxcx/carrier/getCarrier.action"; var page = 1;  var GetList = function (that) {  that.setData({  hidden: false  });  wx.request({  url: url,  data: {   pageSize: 10,   pageNo: page  },  success: function (res) {   var l = that.data.list   for (var i = 0; i < res.data.length; i++) {   l.push(res.data[i])   }   that.setData({   list: l   });   page++;   that.setData({   hidden: true   });  }  }); } Page({  data: {  hidden: true,  list: [],  scrollTop: 0,  scrollHeight: 0  },  onLoad: function () {  var that = this;  wx.getSystemInfo({   success: function (res) {   console.info(res.windowHeight);   that.setData({    scrollHeight: res.windowHeight   });   }  });  },  onShow: function () {  var that = this;  GetList(that);  },  bindDownLoad: function () {  var that = this;  GetList(that);  },  scroll: function (event) {  this.setData({   scrollTop: event.detail.scrollTop  });  },  refresh: function (event) {  page = 1;  this.setData({   list: [],   scrollTop: 0  });  GetList(this)  },  onPullDownRefresh: function () {  console.log("下拉")  },  onReachBottom: function () {  console.log("上拉");  } }) 

{  "navigationBarTitleText": "下拉刷新",  "enablePullDownRefresh": true,  "backgroundTextStyle": "dark" } 

<view class="container">  <scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;"  class="list" bindscrolltolower="bindDownLoad" bindscroll="scroll" bindscrolltoupper="refresh">  <view class="item" wx:for="{{list}}">   <image class="img" src="https://cdn.kuaidi100.com/images/all/56/zhongtong.png"></image>   <view class="text">   <text class="title">{{item.carrierName}}</text>   <text class="description">{{item.carrierTelphone}}</text>   <text class="description">{{item.carrierId}}</text>   </view>  </view>  </scroll-view>  <view class="body-view">  <loading hidden="{{hidden}}" bindchange="loadingChange">   加载中...  </loading>  </view> </view> 

.container{  height: 100%;  padding: 20rpx; }  .item{  display: flex;  margin-bottom: 50rpx; width:100%; background:#f0f0f0; overflow:hidden; }  .img{  height: 100rpx;  width: 100rpx;  border-radius: 50%; }  .text{  display: flex;  flex-shrink:1;  flex-grow:1;  padding: 10rpx;  flex-wrap: wrap;  font-size: 50rpx; }  .title{  font-size: 50rpx;  margin:10rpx 100rpx 10rpx 100rpx; } .description{  font-size: 50rpx;  align-self:flex-end; } 

http://192.168.30.4:8080/gtxcx/carrier/getCarrier.action这个接口就是更具传入的页数，每次返回不同数据。