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

最新推荐文章于 2024-11-24 20:54:42 发布

原创最新推荐文章于 2024-11-24 20:54:42 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

小程序同时被 3 个专栏收录

4 篇文章

订阅专栏

uni-app

2 篇文章

订阅专栏

swiper-item

1 篇文章

订阅专栏

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

@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'; // 需要重置
		            },