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

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>