uni-app 上拉刷新 下拉加载

以下内容均为学习笔记抄录，为复习方便，侵权请联系删除

开启下拉刷新

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

• 需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh
• 通过调用uni.startPullDownRefresh方法来开启下拉刷新

通过配置文件开启

创建list页面进行演示

<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文件中找到当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh

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

通过API开启

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>

学习实例1

<template>
	<view>
		<view>这是列表页</view>
		<view v-for="item in list">{{item}}</view>
		
		<!-- 通过点击进行下拉刷新 -->
		<button @click="pullDown">下拉刷新</button>
	</view>
</template>

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

<style>
</style>

上拉加载

通过在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>

学习实例2

<template>
	<view>
		<view>这是列表页</view>
		<view class="box-item" v-for="item in list">{{item}}</view>
		
		<!-- 通过点击进行下拉刷新 -->
	<!-- 	<button @click="pullDown">下拉刷新</button> -->
	</view>
</template>

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

<style>
	.box-item{
		height: 100px;
		line-height: 100px;
	}
</style>