在uniapp中onPullDownRefresh触发多次的解决方法
微信小程序同样
由于在uniapp中onPullDownRefresh触发多次的，多次下拉会导致圆圈一直再转，而不消失。
pages.json文件 enablePullDownRefresh 一定要设置为true,才可以执行刷新的操作。
{
"path": "pages/business/demo",
"style": {
"navigationBarTitleText": "测试",
"enablePullDownRefresh": true
}
}
解决方案：启动一个定时器来监控，是否触发了两次，以及是否再刷新。
isRefresh: false, //模拟网络请求
isStart: false, //监控二次触发
定时器 来控制刷新按钮的消失
<template>
<view class="b-content">
<view class="c-header">
<button type="default" class="c-header-btn">+我要发布</button>
</view>
<view class="head-nav">
<!-- 头部选项卡 -->
<view v-for="(item,y) in navList" :key="y" :class="listIndex == y ? 'activite':''"
@click="checkListIndex(y)">
{{item.name}}
</view>
</view>
<!-- 内容 -->
<view class="content">
<view class="c-item" v-for="(item,i) in dataList" :key="i">
<view class="c-item-right">
<image class="c-item-right-image" src="" mode=""></image>
<view class="item-right-btn"><button class="c-item-right-btn">联系ta</button></view>
</view>
<view class="c-item-mid">
<text class="c-item-mid-name">董小姐</text>
<text
class="c-item-mid-content">在现代社会中，有一个永恒的话题，那就是竞争与合作，一个人不可能地生活在社会中，而人与人之间的竞争与合作又是我们社会生存和发展的动力。</text>
<text class="c-item-mid-time">2020-09-08</text>
</view>
</view>
</view>
<!-- <uni-list>
<uni-list-item v-for="(item,i) in dataList" :key="i" :title="item.id">
<view>
<text>{{item.name}}</text>
</view>
</uni-list-item>
</uni-list> -->
</view>
</template>
脚本
<script>
export default {
data() {
return {
navIndex: 1,
navList: [{
id: "tab01",
name: '最新',
newsid: 0
}, {
id: "tab02",
name: '推荐',
newsid: 23
}, {
id: "tab03",
name: '关注',
newsid: 223
}],
listIndex: 0,
dataList: [{
id: "tab01",
name: '最新',
}, {
id: "tab01",
name: '最新',
}, {
id: "tab01",
name: '最新',
}],
isRefresh: false,
isStart: false,
pageSize: 10, //条数
currentPage: 1, //页数
datalist: {}, //数据
timer: null, //定时器名称
}
},
methods: {
checkIndex(index) {
this.navIndex = index;
// this.pageSize = 10
// this.currentPage = 1
// this.datalist = {}
// this.getList(this.HospitalCode, e)
},
checkListIndex(index) {
this.listIndex = index;
// this.pageSize = 10
// this.currentPage = 1
// this.datalist = {}
// this.getList(this.HospitalCode, e)
},
getList(HospitalCode, index) {
// this.$request('/api/eurekamedicalsystem/v2/medical-critical-value', {
// "HospitalCode": HospitalCode,
// "statusCode": this.state,
// "reportEndDatetime": this.reportEndDatetime,
// "reportStartDatetime": this.reportStartDatetime,
// "sorting": "DealDatetime desc",
// // "key": this.searchValue
// "pageSize": this.pageSize,
// "currentPage": this.currentPage
// }).then(res => {
// //上拉加载数据开始
// if (res.items.length == 0) {
// // this.contentText = '没有更多了'
// uni.showToast({
// title: '没有更多数据了',
// icon: "none"
// });
// }
// if (this.currentPage != 1) {
// this.datalist = this.datalist.concat(res.items)
// } else {
// this.datalist = res.items
// //上拉加载数据结束
// }
// })
this.dataList = this.dataList.concat(this.dataList)
},
},
// 下拉刷新
onPullDownRefresh() {
console.log('refresh111');
if (this.isRefresh) {
console.log('refresh22222');
this.isStart = true;
return
}
this.isRefresh = true
let _self = this
console.log('refresh');
this.dataList = [{
id: "tab01",
name: '最新',
}, {
id: "tab01",
name: '最新',
}, {
id: "tab01",
name: '最新',
}];
setTimeout(function() {
console.log('refresh33333');
_self.isRefresh = false
uni.stopPullDownRefresh(); //停止当前页面下拉刷新
_self.currentPage = 1;
_self.getList(_self.HospitalCode);
}, 3000);
},
// 上拉加载
onReachBottom() {
if (this.isRefresh) {
return
}
this.isRefresh = true
let _self = this
uni.showNavigationBarLoading()
console.log('reach');
setTimeout(function() {
_self.isRefresh = false
_self.currentPage++;
_self.getList(_self.HospitalCode)
uni.hideNavigationBarLoading()
}, 1000);
},
//一般在页面需要的地方使用，这里我是放在了onshow()里
onShow() {
let _self = this
// console.log('onshow');
this.timer = setInterval(function() {
// 放入你自己的业务逻辑代码
if (_self.isRefresh == false && _self.isStart == true) {
uni.stopPullDownRefresh(); //停止当前页面下拉刷新
_self.isStart = false;
console.log("success dismiss ")
}else{
console.log("success dismiss ",_self.isRefresh,_self.isStart)
}
}, 1000);
},
//uniapp中onHide()能监听到页面离开
onHide() { //离开页面前清除计时器
// console.log('onHide');
clearInterval(this.timer);
this.timer = null;
},
}
</script>
样式
<style lang="scss" scoped>
.head-nav {
width: 50%;
margin: 20rpx auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.activite {
font-weight: bold;
border-bottom: 6rpx solid #0065d9;
color: #0065d9;
}
.head-nav>view {
padding-bottom: 10rpx;
}
.c-header {
display: flex;
justify-content: center;
align-items: center;
margin-top: 10rpx;
}
.c-header-btn {
width: 300rpx;
height: 80rpx;
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
// font-size: 12rpx;
// font-family: PingFang SC;
// font-weight: 500;
border: none;
background-color: #eb8101;
color: white;
border-radius: 15rpx;
&::after {
border: none;
}
}
.content {
// background: #008000;
}
.c-item {
display: flex;
flex-direction: row;
}
.c-item-right {
display: flex;
flex-direction: column;
text-align: center;
// justify-content: center;
align-items: center;
width: 160rpx;
}
.c-item-right-image {
margin-top: 20rpx;
width: 120rpx;
height: 120rpx;
background-color: #0065d9;
border-radius: 60rpx;
}
.c-item-mid {
display: flex;
flex-direction: column;
margin-left: 20rpx;
flex: 1;
}
.c-item-mid-name {
margin-top: 10rpx;
font-weight: bold;
font-size: 30rpx;
}
.c-item-mid-content {
margin-top: 10rpx;
margin-left: 20rpx;
margin-right: 20rpx;
font-size: 30rpx;
}
.c-item-mid-time {
margin-top: 10rpx;
margin-bottom: 10rpx;
font-size: 28rpx;
}
</style>
<style lang="scss">
.item-right-btn {
margin: 10rpx 10rpx auto 10rpx;
}
.c-item-right-btn {
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 12rpx;
// font-family: PingFang SC;
// font-weight: 500;
border: none;
background-color: lightgray;
color: #eb8101;
&::after {
border: none;
}
}
</style>
最后，你可以使用一些第三方的下拉刷新的插件，或者使用scollview来自定义刷新。
网友评论