企业做网站需要什么,wordpress 二级排序,网站开发 定制 合同 模板,大港做网站上拉加载和下拉刷新是小程序开发的常见需求。本文将介绍如何在微信小程序中实现上拉加载和下拉刷新的功能#xff0c;为用户带来更加流畅、便捷的使用体验。
1. 实现效果 微信小程序 上列表拉加载下拉刷新 2. 实现思路
(1) 首先需要在使用到的 json 文件下配置 “enablePull… 上拉加载和下拉刷新是小程序开发的常见需求。本文将介绍如何在微信小程序中实现上拉加载和下拉刷新的功能为用户带来更加流畅、便捷的使用体验。
1. 实现效果 微信小程序 上列表拉加载下拉刷新 2. 实现思路
(1) 首先需要在使用到的 json 文件下配置 “enablePullDownRefresh”: true
{usingComponents: {},enablePullDownRefresh: true,
}(2) 在 js 文件中加上触底函数跟上拉函数
//触底函数
onReachBottom(){console.log(上拉加载....);
},
//上拉函数
onPullDownRefresh(){console.log(下拉刷新...);
},(3) 请求接口将新请求的数据通过 cancat 方法合并到 list 数组中然后更新数据。 concat() 方法用于连接两个或多个数组 var dataList that.data.dataList.concat(dataArr)that.setData({dataList: dataList});4对数据进行判断如果列表数据条数小于总条数隐藏 “正在加载” 字样显示 “已加载全部” 字样
if (res.data.dataList.length this.data.limit) {that.setData({loading: false,loaded: true,});
}(5) 上拉加载时改变文字状态然后调用接口 let that this; if (!that.data.loading) { that.setData({ loading: true, loaded: false }); } setTimeout(function () { that.getData(); }, 500)
6下拉刷新时将页码重置为 1 然后再次调用接口即可但是不要忘了刷新完成后要关闭刷新的操作wx.hideNavigationBarLoading() 和 wx.stopPullDownRefresh() 。 this.data.list []wx.showNavigationBarLoading() this.setData({page: 1});this.licensePort(); setTimeout(function () {wx.showToast({title: 刷新成功,icon: none,duration: 1000})wx.hideNavigationBarLoading() wx.stopPullDownRefresh() }, 1000)3. 完整代码
3.1. wxml
!-- 内容 --
view classnavBox wx:for{{dataList}} wx:keyindexviewtext classlableBox区县/texttext{{item}}/text/view
/view
!-- 加载时文字 --
view classbomTxtview hidden{{!loading}}正在加载.../viewview hidden{{!loaded}}已加载全部/view
/view3.2. wxss
page {background: #EFF4FF;
}
.navBox {margin: 2.5%;font-size: 14px;border-radius: 36rpx;background: white;
}
.lableBox {display: inline-block;width: 90px;text-align: right;margin-right: 30rpx;
}
.navBox view {padding: 24rpx 30rpx;
}
.navBox view:not(:last-child) {border-bottom: 1px solid rgb(235, 237, 239);
}
.bomTxt {display: flex;justify-content: center;font-size: 12px;color: rgb(126, 138, 155);padding: 0rpx 0rpx 20rpx 0rpx;
}3.3. json
{usingComponents: {},navigationBarBackgroundColor: #6197FB,navigationBarTitleText: 列表刷新加载,enablePullDownRefresh: true,backgroundTextStyle: light,backgroundColor: #6197FB
}3.4. js
//获取应用实例
var app getApp();
Page({data: {pageNum: 1, //当前第几页pageSize: 20, //一页展示几条dataList: [], //所有数据loading: false, //是否展示 “正在加载” 字样loaded: false //是否展示 “已加载全部” 字样},onLoad: function (options) {var thatthisthat.getData(1, 20, 1);},/*** 获取数据*/getData(pageNum, pageSize, type) {var that this;if (type 1) { //刷新that.setData({pageNum: 1,pageSize: pageSize,dataList: [],});setTimeout(function () {var dataArr []for (var i 0; i pageSize; i) {dataArr.push(that.data.pageNum 内容 i);}var dataList that.data.dataList.concat(dataArr)that.setData({dataList: dataList});wx.showToast({title: 刷新成功,icon: none,duration: 1000})wx.hideNavigationBarLoading() //完成停止加载wx.stopPullDownRefresh() //停止下拉刷新if (dataList.length0) {// 更新数据that.setData({dataList: dataList,loading: false,});} else {that.setData({loaded: true, //显示 “没有数据” 字样 loading: false //隐藏 “正在加载” 字样});}}, 2000);} else if (type 2) { //加载if (pageNum 3) {wx.showToast({title: 没有更多了,icon: success,duration: 1000})} else {wx.showLoading({title: 加载中...,});setTimeout(function () {for (var i 0; i pageSize; i) {that.data.dataList.push( 内容 i);}that.setData({pageNum: pageNum,dataList: that.data.dataList});wx.hideLoading();}, 2000);}}},/*** 上拉加载*/onReachBottom() {const that this;if (!that.data.loading) {that.setData({loading: true, //加载中loaded: false //是否加载完所有数据});}var pageNums that.data.pageNum 1;this.getData(pageNums, 20, 2);},/*** 下拉刷新*/onPullDownRefresh() {var thatthiswx.showNavigationBarLoading() //在标题栏中显示加载圈圈that.getData(1, 20, 1);}
})
