swiper-item自定义下拉刷新和上拉加载

本文介绍如何在小程序中实现下拉刷新和滚动到底部加载更多数据的功能。通过设置scroll-view组件属性并定义相关事件处理函数,可以有效提升用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

@scrolltolower // 滚动到底部触发
:refresher-enabled=“true” // 是否开启自定义下拉刷新,此时要在page.json把小程序原生的关闭
:refresher-triggered=“triggered” // 控制希腊刷新书否被触发,true为触发,反之
@refresherpulling=“onPulling” // 触发之后要操作的函数
@refresherrestore=“onRestore” // 还原隐藏
下拉刷新四个添加缺一不可
HTML部分

<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="moreMessage" @refresherpulling="onPulling" 
					:refresher-triggered="triggered" :refresher-enabled="true" @refresherrefresh="onRefresh" @refresherrestore="onRestore">
						<view class="page-box">	
							内容区域
    					</view>
</scroll-view>

js部分

// 滚动到底部
		moreMessage(){
			const me = this
			if(me.nowPage == me.allPages){
				this.showLoadMore = true
				this.loadMoreText = "我也是有底线的-_-";
				return
			}
			this.next_page += 1;
			this.getMsgList();
		},
		// 触发下拉刷新
		 onRefresh() {
			 this.messageList = []
			 this.next_page = 1
			 this.loading = true
			 let wait = setTimeout(() => {
			 		this.getMsgList()
					this.triggered =  false
			 		clearTimeout("wait")
			 	}, 500);
		}, 
		// 下拉刷新复位
		 onRestore() {
		                this.triggered = 'restore'; // 需要重置
		            },
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值