微信小程序中scroll-view怎么实现上拉加载与下拉刷新

这篇文章主要讲解了"微信小程序中scroll-view怎么实现上拉加载与下拉刷新"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"微信小程序中scroll-view怎么实现上拉加载与下拉刷新"吧！

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

实现效果图：

如图，使用小程序的scroll-view实现的上拉加载数据，下拉刷新数据，试下代码如下：

js文件代码：

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("上拉");  } })

json文件代码

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

wxml文件代码：

             {{item.carrierName}}   {{item.carrierTelphone}}   {{item.carrierId}}              

wxss文件代码

.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这个接口就是更具传入的页数，每次返回不同数据。

感谢各位的阅读，以上就是"微信小程序中scroll-view怎么实现上拉加载与下拉刷新"的内容了，经过本文的学习后，相信大家对微信小程序中scroll-view怎么实现上拉加载与下拉刷新这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！