微信小程序 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.listfor (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实现上拉加载与下拉刷新的实例的详细内容，更多请关注小潘博客其它相关文章！