uni-app之下拉刷新(七）

---

1.下拉刷新

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

• 需要在pages.json里，找到的当前页面的pages节点，并在style选项中开启enablepullDownRefresh
• 通过调用uni.startPullDownRefresh方法来开启下拉刷新
  通过配置文件开启
  创建list页面进行演示

<template>
	<view>
	<view>这是列表页</view>
	<view v-for="item in list">
		{{item}}
	</view>
	</view>
</template>

<script>
	 export default{
		 data(){
			 return{
				 list:['前端','JAVA','UI','测试','大数据']
			 }
		 }
		
	 }
	}
</script>

<style>
</style>

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

	{
			"path":"pages/list/list",
			"style":{
				"enablePullDownRefresh":true
			}
		},

通过API开启
uni.startPullDownRefresh()

2.监听下拉刷新

通过onPullDownRefresh可以监听到下拉刷新的动作

 export default{
		 data(){
			 return{
				 list:['前端','JAVA','UI','测试','大数据']
			 }
		 },
		 onPullDownRefresh() {
		 	console.log('触发了下拉刷新')
	 },
	 methods:{
		 pullDown(){
			 uni.startPullDownRefresh()
		 }
	 }
	}

3.关闭下拉刷新

uni.stopPullDownRefresh()
停止当前页面下拉刷新

 export default{
		 data(){
			 return{
				 list:['前端','JAVA','UI','测试','大数据']
			 }
		 },
		 onPullDownRefresh() {
		 	console.log('触发了下拉刷新')
			setTimeout(()=>{
			this.list=['java','UI','测试']
			uni.stopPullDownRefresh()
		 },2000)
	 },
	 methods:{
		 pullDown(){
			 uni.startPullDownRefresh()
		 }
	 }
	}

4.页面触底事件

onReachBottom：页面滚动到底部的事件(不是scroll-view滚到底)，常用于下拉下一页数据。

	 onReachBottom() {
	 	console.log('页面触底了')
		this.list=[...this.list,...['java','UI','测试']]
	 }

pages.json中可以设置触底距离

	"path":"pages/list/list",
			"style":{
				"enablePullDownRefresh":true,
				"onReachBottomDistance":200
			}