【uniapp】onPullDownRefresh触发多次的解决方法

WMSmile

已于 2022-09-13 19:07:25 修改

阅读量2.3k

点赞数 2

分类专栏： uni-app Vue 微信小程序文章标签： uni-app javascript 前端

于 2022-09-13 19:02:23 首次发布

本文链接：https://blog.csdn.net/wm9028/article/details/126839373

版权

Vue 同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

微信小程序

3 篇文章 0 订阅

订阅专栏

uni-app

2 篇文章 0 订阅

订阅专栏

在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来自定义刷新。