uni-app的下拉刷新、上滑加载（五）

目录

下拉刷新

监听下拉刷新

关闭下拉刷新

上拉加载

---

• 下拉刷新

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

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

• 通过调用uni.startPullDownRefresh方法来开启下拉刷新

通过配置文件开启

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

<script>
	export default {
		data () {
			return {
				arr: ['前端','JAVA','UI','大数据','小程序']
			}
		}
	}
</script>

<style>
</style>

在pages.json文件中进行配置在style中开启enablePullDownRefresh

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

 通过API开启

uni.startPullDownRefresh()

• 监听下拉刷新

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

export default {
  data () {
    return {
      arr: ['前端','JAVA','UI','大数据','小程序']
    }
  },
  methods: {
    startPull () {
      uni.startPullDownRefresh()
    }
  },
  onPullDownRefresh () {
    console.log('触发下拉刷新了')
  }
}

• 关闭下拉刷新

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

<template>
	<view>
		<button type="primary" @click="startPull">开启下拉刷新</button>
		<view v-for="(item,index) in arr" :key="index">
			{{item}}
		</view>
	</view>
</template>
<script>
	export default {
		data () {
			return {
				arr: ['前端','java','ui','大数据']
			}
		},
		methods: {
			startPull () {
				uni.startPullDownRefresh()
			}
		},
		
		onPullDownRefresh () {
			this.arr = []
			setTimeout(()=> {
				this.arr = ['前端','java','ui','大数据']
				uni.stopPullDownRefresh()
			}, 1000);
		}
	}
</script>

• 上拉加载

 

通过在pages.json文件中找到当前页面的pages节点下style中配置onReachBottomDistance可以设置距离底部开启加载的距离，默认为50px

通过onReachBottom监听到触底的行为

<template>
	<view>
		<button type="primary" @click="startPull">开启下拉刷新</button>
		<view v-for="(item,index) in arr" :key="index">
			{{item}}
		</view>
	</view>
</template>
<script>
	export default {
		data () {
			return {
				arr: ['前端','java','ui','大数据','前端','java','ui','大数据']
			}
		},
		onReachBottom () {
			console.log('触底了')
		}
	}
</script>

<style>
	view{
		height: 100px;
		line-height: 100px;
	}
</style>

 本篇文章讲解uni-app中的下拉刷新与上滑加载，若有什么地方不明确或某些位置不太懂得请在评论中指出，后期我会继续出更多的基础教学谢谢各位支持 ，谢谢大家