列表刷新样式如图
刷新： 其实是有三个白点的 微信自带的刷新样式
image
上拉加载：转圈圈动画在wxss里面的样式
image
没有更多
image
对应的.js .wxml .wxss .json文件如下，通用代码可直接贴去用，唯一要修改的是requestData()方法里的网络请求数据。
.wxml
<view class="weui-loadmore" hidden="{{isHideLoadMore}}">
<view class="weui-loading"></view>
<view class="weui-loadmore__tips">正在加载</view>
</view>
<view class="weui-loadmore" hidden="{{isHideNoMore}}">
<view class="weui-loadmore__tips">没有更多数据了</view>
</view>
.js
/**
* 页面的初始数据
*/
data: {
isHideLoadMore: true,
isHideNoMore: true,
isClear: true, //用来判断是否清除原列表数组数据，刷新要清空数组数据，上拉加载不需要清空数组而是page++之后访问到的数组concat进原数组
pageNum: 1,
totalPage: 0,
list:[],
},
/**
* 访问请求搜索接口
*/
requestData: function () {
// TODO：请求列表数据
let that = this
wx.request({
url: that.data.URL,
data: {//接口入参
page: that.data.pageNum,
...: ...,
},
header: {
'Content-Type': 'application/json'
},
success(res) {
if (that.data.isClear) {
that.setData({
list: res.data.data.orderList,
totalPage: res.data.data.totalPage,
}
)
} else {
that.setData({
list: that.data.list.concat(res.data.data.orderList),
totalPage: res.data.data.totalPage,
}
)
}
wx.hideLoading()
}
})
setTimeout(function () {
wx.hideLoading()
}, 2000)
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
let that = this
//判断双击点击时间点
that.setData({
pageNum: 1,
isHideNoMore: true,
isClear: true,
})
wx.showLoading({
title: '加载中',
})
that.requestData()
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
let that = this;
that.setData({
loadingimg: false,
isHideNoMore: true,
pageNum: 1,
isClear: true
})
wx.showLoading({
title: '加载中',
})
that.requestData()
setTimeout(function () {
wx.stopPullDownRefresh()
that.setData({
loadingimg: true
})
}, 1000)
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
let that = this;
that.setData({
isHideLoadMore: false,
isHideNoMore: true,
isClear: false,
})
if (that.data.pageNum >= that.data.totalPage) {
setTimeout(() => {
this.setData({
isHideLoadMore: true,
isHideNoMore: false,
})
}, 0)
return;
}
that.data.pageNum++;
that.requestData();
setTimeout(() => {
this.setData({
isHideLoadMore: true,
})
}, 1000)
},
.wxss
.weui-loading {
margin: 0 5px;
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
-webkit-animation: weuiLoading 1s steps(12, end) infinite;
animation: weuiLoading 1s steps(12, end) infinite;
background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;
background-size: 100%;
}
.weui-loadmore {
width: 65%;
margin: 1.5em auto;
line-height: 1.6em;
font-size: 14px;
text-align: center;
}
.weui-loadmore__tips {
display: inline-block;
vertical-align: middle;
}
.json
{
"navigationBarTitleText": "售后列表",
"enablePullDownRefresh": true,
"backgroundColor": "#f8f8f8",
"enableReachBottom": "true"
}
如果对您有所帮助，请给个赞吧。
如果有干货请留言交流一波。
