uni-app开启下拉刷新以及如何使用setTimeout 以及点击按钮实现刷新

本文链接：https://blog.csdn.net/weixin_49393290/article/details/122015613

enablePullDownRefresh

在pages.json文件中的页面配置中添加"enablePullDownRefresh"=true这个属性即可

但是这样只会添加一个刷新的样式，您想一下拉也同时刷新页面的内容

并且同时设定一个时间来关闭这个刷新的状态（uni.stopPullDownRefresh）

刷新前

刷新后

监听下拉刷新，不需要在html写啥，直接加一个就行

onPullDownRefresh(){
console.log('触发下拉刷新')
}

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {
		clickHandle(num,e){
			console.log('点击我了',num,e)
		},
		onPullDownRefresh(){
			console.log('触发下拉刷新')
		}
		}
	}
</script>

点击按钮实现刷新

（调用uni.startPullDownRefresh）

html部分

<view>
	<!--用event来把事件传进去，事件通过‘e’来接收-->
	<button @click="pullDown">下拉刷新按钮</button>
<view v-for="item in list">{{item}}</view>
</view>

js部分

<script>
	export default {
		data() {
			return {
			list:['aa','bb']
			}
		},
		onLoad() {

		},
		methods: {
		pullDown(){
			this.list=['bb','as']
			uni.startPullDownRefresh()
			uni.stopPullDownRefresh()
		}
		}
	}
</script>

点击刷新前

刷新后

这样是可以刷新，可是这个刷新速度太快了，快到你根本看不到刷新了

js部分这样改

<script>
	export default {
		data() {
			return {
			list:['aa','bb']
			}
		},
		onLoad() {

		},
		methods: {
		pullDown(){
			this.list=['bb','as']
			uni.startPullDownRefresh()
			// uni.stopPullDownRefresh()
			setTimeout(()=>{
				// this.list=['bb','as']
				// uni.startPullDownRefresh(),
				uni.stopPullDownRefresh()
			},2000)
		}
		}
	}
</script>