uni-app之下拉刷新与 上拉加载

uni-app之下拉刷新

• 需要 在 page.json 文件之中 的对应的 page之中 设置
  • "enablePullDownRefresh":true,
• 方法1：
  • onPullDownRefresh 方法
• 方法2：
  • uni.startPullDownRefresh() 自定义按钮事件，触发这个下拉刷新
• 关闭下拉刷新 uni.stopPullDownRefresh()

page.json

• 再对应的 页面之中 新增 "enablePullDownRefresh":true,

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/msg/msg",
			"style":{
					"navigationBarTitleText":"我是msg",
					"navigationBarBackgroundColor": "#007aff",
					"enablePullDownRefresh":true,
					
					"h5":{
						"pullToRefresh":{
							"color":"#DD524D"
						}
					}
			}
		},
		{
			"path": "pages/index/index"
		}
    ],
}

方式1 使用配置项的 形式开启下拉刷新

页面 msg.vue

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

<script>
	export default {
		data(){
			return {
				list:[
					"语文","数学","英语","美术","生物"
				]
			}
		},			
	  // 下拉刷新触发 方法 01
		onPullDownRefresh(){
			console.log("下拉刷新的");
			setTimeout(()=>{
				this.list = ["语文1","数学2","英语3","美术4","生物5"]
				uni.stopPullDownRefresh(); // 关闭下拉刷新
			},2000)
		}
	}
</script>

方式2 自定义按钮事件 触发 uni.startPullDownRefresh()

<template>
	<view>
		我是msg之list
		<view v-for="(item,index) in list" :key="index">
			<view class="">{{ item }}</view>
		</view>
		<button type="default" @click="refreshBtn">我是下拉刷新</button>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				list:[
					"语文","数学","英语","美术","生物"
				]
			}
		},			
		methods: {
			refreshBtn(){
				uni.startPullDownRefresh("success")// 开启下拉刷新 
				// 之后数据的 赋值 赋值后关闭
				setTimeout(()=>{
					this.list = ["语文1","数学2","英语3","美术4","生物5"]
					uni.stopPullDownRefresh(); // 关闭下拉刷新
				},2000)
			}
		}
	}
</script>

<style lang="scss">

</style>

uni-app之上拉加载 ( 页面触底 )

page.json 配置

• 页面触底的距离 触发 "onReachBottomDistance":100,
  • 默认为 50

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/msg/msg",
			"style":{
					"navigationBarTitleText":"我是msg",
					"navigationBarBackgroundColor": "#007aff",
					"onReachBottomDistance":100,
			}
		},
	]
}

msg.vue 使用 页面触底 生命函数 onReachBottom

<template>
	<view>
		我是msg之list
		<view class="box" v-for="(item,index) in list" :key="index">
			<view class="box-item">{{ item }}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				list:[
					"语文","数学","英语","美术","生物","物理","化学","品德",
					"道法","刀法","菜鸡","龙龙","非法","朗朗","花花","屁屁"
				]
			}
		},	
		onReachBottom(){
			// 页面 触底的 时候 加载最新的数据
				this.list = [...this.list,...["小小","渣渣","亮亮"]]
		},
		methods: {
		}
	}
</script>

<style lang="scss">
.box {
	&-item {
		height: 50px;
		line-height: 50px;
		border-bottom: 1px solid #ccc;
	}
}
</style>