uni-app 使用scroll-view实现页面列表滚动加载（简单实现）

紫琪软件工作室

于 2022-01-12 14:26:06 发布

阅读量1.7k

点赞数

文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/qq_21609531/article/details/122452683

版权

使用scroll-view实现页面列表滚动加载

1、css样式

/* scroll-view 样式 */
.right-scroll-view {
width: 100%;
height: 100%;
}

2、代码

<scroll-view class="right-scroll-view" scroll-y="true" scroll-with-animation="true"
				@scrolltolower="scrollLoadMoreData">
	<!-- 循环条目代码块 -->
	<view class="load-text">
		<text>{{loadText}}</text>
	</view>
</scroll-view>

3、方法

// 1）参数
loadText: '滚动加载更多...',
datas: {
	next: true,
	curPage: 1,
	datas: []
},

// 2) 方法
async scrollLoadMoreData() {
				
	if(!this.datas.next) {
		
		this.loadText = "已经到底了！"
		return
	}
	
	uni.showLoading({
		mask: true,
		title: '加载中...'
	})
	
	// 数据加载具体实现方法
	await this.loadMoreData()
	
	uni.hideLoading()
},