下拉刷新 uniapp
uniapp有多钟下拉刷新方式,这里只要说两种(整体下拉、非整体下拉)
整体下拉刷新
-y :refresher-threshold="45" :refresher-enabled="true" :refresher-triggered="refresherTriggered" @refresherrefresh="refresherrefresh" @refresherrestore="refresherrestore" @refresherabort="refresherabort" > view scroll 这里是内容
效果图
简单的刷新(很单一)
在pages.json文件中开启下拉刷新
{
"path": "pages/user/withdrawals/withdrawal-records",
"style": {
"navigationBarTitleText": "提现记录",
"enablePullDownRefresh": true,
"app-plus": {
"pullToRefresh": {
"support": true,
"color": "#55aa00", //小圈圈的颜色
"style": "circle" //小圈圈的样式
}
}
}
}
在生命周期中加入
onLoad() {
// 刚进入页面的时候就加载这个动画
uni.startPullDownRefresh();
},
下拉刷新
onPullDownRefresh() {
this.loadingType = 4;
this.pageNum = 1;
this.withdrawalsList = [];
this.getWithdrawalsrecording();
},
在请求数据结束后关掉动画
uni.stopPullDownRefresh();
效果图
下面推荐一款uniapp加载动画(觉得比较好看)
打开动画
uni.showNavigationBarLoading();
关闭动画
uni.hideNavigationBarLoading();
效果图
上拉加载效果请前往
https://www.cnblogs.com/ckfeng/p/16088559.html