下拉刷新上拉加载

下拉刷新(两种方式)

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

{
	"path":"pages/list/list", //开启用户下拉刷新动作，关闭，监听，按钮刷新 get请求 
	
	"style":{
		"enablePullDownRefresh":true,
	}
},

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

<button @click="pullDown">
			下拉刷新
</button>

methods:{
		pullDown(){
			uni.startPullDownRefresh()
		},
}

下拉刷新的监听

• 通过onPullDownRefresh可以监听到下拉刷新的动作
• 在onPullDownRefresh里面延时了2s后uni.stopPullDownRefresh()关闭了下拉刷新

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

上拉加载

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

{
	"path":"pages/list/list", //开启用户下拉刷新动作，关闭，监听，按钮刷新 get请求 
	
	"style":{
		"enablePullDownRefresh":true,
		"onReachBottomDistance":200 //页面下拉触底，加载下一页的数据
	}
},

onReachBottom() {
	console.log('页面触底')
	this.list = [...this.list,...['前端','JAVA','大数据','测试','UI']] //循环加载下一页
},