ユニアプリプルダウンリフレッシュとプルアップローディング

ユニアプリプルダウンリフレッシュとプルアップローディング

更新するためのユニアプリプルダウン

• page.jsonファイルの対応するページで設定する必要があります
  • "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>

ユニアプリのプルローディング（ページ下部）

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>