【uni-app】下拉刷新

最新推荐文章于 2024-08-22 11:53:20 发布

AC它真的很香

最新推荐文章于 2024-08-22 11:53:20 发布

阅读量162

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Erin_jwx/article/details/119565698

版权

前端专栏收录该内容

26 篇文章 0 订阅

订阅专栏

官方文档
pages.jspn 这里只展示需要设置下拉刷新的页面

"pages": [
		{
		    "path" : "pages/home/home",
		    "style" :                                                                                    
		    {
		        "navigationBarTitleText": "列表",
		        "enablePullDownRefresh": true
		    }
		    
		}
	]

home.vue

<template>
	<view>
		<view class="home">
			<view v-for="item in list">
				{{item}}
			</view>
			<button @click="doRefresh">点击刷新</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:["前端","Java","UI","大数据","数据库"]
			}
		},
		methods: {
			doRefresh(){
				console.log("点击刷新按钮")
				uni.startPullDownRefresh(); //帮你执行拉下刷新，会触发onPullDownRefresh回调
			}
		},
		onPullDownRefresh() {
			console.log("下拉刷新");
			setTimeout(()=>{
				this.list = ["大数据","数据库","前端","Java","UI"];
				uni.stopPullDownRefresh();
			},1000);
		}
	}
</script>

<style>

</style>