微信小程序 scroll

这篇文章主要介绍了微信小程序 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文件代码：

 view >
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这个接口就是更具传入的页数，每次返回不同数据。
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
微信小程序列表的上拉加载和下拉刷新的实现
微信小程序实现点击按钮修改字体颜色的功能
以上就是微信小程序 scroll-view实现上拉加载与下拉刷新的实例的详细内容，更多请关注php中文网其它相关文章！
 
  
 微信app下载
 
微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！