列表刷新樣式如圖
刷新： 其實(shí)是有三個(gè)白點(diǎn)的 微信自帶的刷新樣式
image
上拉加載：轉(zhuǎn)圈圈動(dòng)畫在wxss里面的樣式
image
沒(méi)有更多
image
對(duì)應(yīng)的.js .wxml .wxss .json文件如下睡陪，通用代碼可直接貼去用斋荞，唯一要修改的是requestData()方法里的網(wǎng)絡(luò)請(qǐng)求數(shù)據(jù)薇溃。
.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">沒(méi)有更多數(shù)據(jù)了</view>
</view>
.js
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
isHideLoadMore: true,
isHideNoMore: true,
isClear: true, //用來(lái)判斷是否清除原列表數(shù)組數(shù)據(jù)躺孝，刷新要清空數(shù)組數(shù)據(jù)弃衍，上拉加載不需要清空數(shù)組而是page++之后訪問(wèn)到的數(shù)組concat進(jìn)原數(shù)組
pageNum: 1,
totalPage: 0,
list:[],
},
/**
* 訪問(wèn)請(qǐng)求搜索接口
*/
requestData: function () {
// TODO：請(qǐng)求列表數(shù)據(jù)
let that = this
wx.request({
url: that.data.URL,
data: {//接口入?yún)? 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)
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
*/
onShow: function () {
let that = this
//判斷雙擊點(diǎn)擊時(shí)間點(diǎn)
that.setData({
pageNum: 1,
isHideNoMore: true,
isClear: true,
})
wx.showLoading({
title: '加載中',
})
that.requestData()
},
/**
* 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶下拉動(dòng)作
*/
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)
},
/**
* 頁(yè)面上拉觸底事件的處理函數(shù)
*/
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"
}
如果對(duì)您有所幫助肴焊，請(qǐng)給個(gè)贊吧唧瘾。
如果有干貨請(qǐng)留言交流一波。
