uni-app下拉刷新

uni-app下拉刷新

  在uni-app中有两种方式开启下拉刷新

1.在配置文件pages.json开启enablePullDownRefresh

  在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
						"path" : "pages/pull/pull",
						"style" :                                                                                    
						{
								"navigationBarTitleText": "",
								"enablePullDownRefresh": true
						}
						
		 },
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
  ],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	}
}

  也可以在 pages.json 里也可以在globalStyle中开启 enablePullDownRefresh，但这是全局开启，所有页面都会开启下拉刷新，不推荐

<template>
	<view>
		<view v-for="(item, index) in list" :key="index">
			{{item}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:['java', '前端', '微服务', '大数据']
			}
		},
		onPullDownRefresh () {
		  console.log('触发下拉刷新了');
			setTimeout(() => {
				this.list = ['微服务', '大数据', 'java', '前端'];
				uni.stopPullDownRefresh(); // 关闭下拉刷新 
			}, 2000);

		},
		methods: {

			  
		}
	}
</script>

<style>

</style>

  效果如下：

2.通过API开启

   api文档 uni.startPullDownRefresh()

	<view>
			<button type="primary" size="mini" @click="clickButton">点击触发下拉刷新</button>
		</view>

		clickButton() {
				uni.startPullDownRefresh();
			}

  效果如下：