【uniapp】实现列表分页加载数据列表的方法，通过scroll-view下拉刷新，上拉加载的方法即可

禾小毅

已于 2023-06-21 16:42:53 修改

阅读量8.8k

点赞数 14

分类专栏：移动端文章标签： uni-app javascript 前端

于 2022-12-14 11:57:41 首次发布

本文链接：https://blog.csdn.net/weixin_50450473/article/details/128313917

版权

移动端专栏收录该内容

5 篇文章 1 订阅

订阅专栏

一、实现思路

1、通过上拉触底事件，累加下一页分页的数据到列表最后，并显示加载的效果

2、再判断总页数是否已经累加完成，如果已完成，则提示 “没有数据了”

二、实现方法

使用scroll-view组件中的触底事件和下拉刷新事件即可

<scroll-view @scrolltolower="lowerBottom" @refresherrefresh="getFresh" scroll-y="true" class="scrollHeight">
	<!-- 此处加列表内容 -->
</scroll-view>

<script lang="ts" setup>
//触底加载
const lowerBottom=()=>{
  //处理触底后的逻辑
}

// 下拉刷新
const getFresh=()=> {
}
</script>

<style lang="scss" scoped>
//必须要设置指定的高度，否则没有触底的效果以及不会触发触底事件
.scrollHeight{
	height: 100vh;
}
</style>

三、以上截图全部代码

<template>
<scroll-view @scrolltolower="lowerBottom" @refresherrefresh="getFresh" scroll-y="true" class="scrollHeight">
	<view class="list" v-if="person.data.list&&person.data.list.length>0">
		<view class="item" v-for="(item,index) of person.data.list" :key="index" @click="toDetail(item)">
			<svg t="1669880074940" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10341" width="50" height="56"><path d="M196.608 102.4c-5.632 0-11.2128 1.024-16.384 3.072a41.472 41.472 0 0 0-13.7216 8.832C158.6176 122.24 153.6 132.1728 153.6 142.08v714.24c0 5.1968 1.1264 10.3424 3.328 15.104 2.2272 4.7872 5.4784 9.088 9.5744 12.672 3.9168 3.7376 8.6016 6.7072 13.7472 8.7296 5.1712 2.048 10.752 3.1232 16.3584 3.1744h630.784c5.632 0 11.2128-1.024 16.384-3.072a41.472 41.472 0 0 0 13.7216-8.832c4.0448-3.6096 7.2448-7.936 9.472-12.6976A36.608 36.608 0 0 0 870.4 856.32V346.5728L631.4752 102.4H196.608z" fill="#859FFF" p-id="10342"></path><path d="M870.4 346.5984h-196.7616a42.7776 42.7776 0 0 1-29.5168-12.928 44.672 44.672 0 0 1-12.672-30.1824V102.4L870.4 346.5984z" fill="#FFFFFF" fill-opacity=".42" p-id="10343"></path><path d="M408.4224 391.5264c0-14.8224 10.4448-20.9152 23.2192-13.6704l207.6928 117.632c12.8 7.2704 12.8 19.072 0 26.3168l-207.6928 117.6064c-12.8 7.2704-23.2192 1.152-23.2192-13.6704v-234.2144z" fill="#FFFFFF" p-id="10344"></path></svg>
			<view class="item_right">
				<view class="item_title">{{item.Name}}</view>
				<view class="collect_btn" @click.stop="cancelCollect(item)">
					<i :class="['iconfont', 'icon-Frame-11']" style="color:#F06F6F;"/>
				</view>
			</view>
		</view>
		<view class="more_text" v-if="person.showMoreData">没有数据了...</view>
	</view>
	<view v-else class="empty_box">
		<image src="@/static/null_icon.png" mode=""></image>
	</view>
</scroll-view>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { GetRemoveCollect } from '@/pages/user/hooks/collect.ts'; // 混入用户操作接口
import { getCollectList } from "@/api/user"
import {onShow} from "@dcloudio/uni-app";
let person:any=reactive({
	// 收藏列表
	data: {
		list: [],
		PageIndex: 1,
		PageSize: 10,
		total: 0
	},
	showMoreData:false
})
// 获取收藏列表
onShow(()=>{
	person.data.PageIndex=1
	uni.pageScrollTo({
	    scrollTop: 0
	});
	GetCollectList()
	if (person.data.PageIndex * person.data.PageSize >= person.data.total) return person.showMoreData=true
})

// 接口收藏列表
let GetCollectList = () => {
	uni.showLoading({title: '加载中'});
	let obj={
	    PageIndex: person.data.PageIndex,
	    PageSize: person.data.PageSize,
	}
	getCollectList(obj).then((res:any) => {
		let {Code,Data}=res.data
		if(Code===200){
			uni.hideLoading();
			person.data.list=[...person.data.list,...Data.Data]
			person.data.total = Data.Total
		}
	})
}

// 跳转至详情
let toDetail = (item:any) => {
	let obj = { Id: item.Id, NodeId: item.NodeId, IsCollect: 1 }
	uni.setStorageSync('setId', JSON.stringify(obj))
	uni.navigateTo({
		url: `/pages/recording/recordDetails`
	});
}
// 取消收藏
const cancelCollect = (item: any) => {
	uni.showModal({
		title: '是否取消收藏？',
		success: function (res) {
			if (res.confirm) {
				// 确定取消收藏
				GetRemoveCollect(item, item.Id, 1)
				// 获取收藏列表
				setTimeout(()=>{
					GetCollectList()
				},200)
			} else if (res.cancel) {
				// 取消
			}
		}
	});
}
//触底加载
const lowerBottom=()=>{
	// 判断是否还有下一页数据
	if (person.data.PageIndex * person.data.PageSize >= person.data.total) return person.showMoreData=true
	// 让页码值自增 +1
	person.data.PageIndex +=1
	// 重新获取列表数据
	GetCollectList()
}
// 下拉刷新
const getFresh=()=> {
}
</script>

<style lang="scss" scoped>
page{
	background: #F5F5F5;
}
.scrollHeight{
	height: 100vh;
	.more_text{
		color: #999;
		font-size: 24rpx;
		text-align: center;
	}
}
.list{
	top: 0rpx;
	padding-bottom: 20rpx;
	.item{
		align-items: center;
		padding: 10rpx 20rpx !important;
	}
	.item_right{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 90%;
		margin-left: 10rpx;
		.item_title{
			width: 90%;
			height: inherit !important; 
		}
		.collect_btn{
			i{
				font-size: 40rpx;
				margin-left: 20rpx;
			}
		}
	}
}
</style>

四、避坑

当 scrollHeight 设置了自定义高度时，方法@refresherrefresh 下拉就会失效，

解决方法：需要加上 :refresher-enabled="true" 和 :refresher-triggered="person.triggered"，refresher-triggered的初始值为false 要先变为true，执行完刷新操作之后再变为false才会有效果

<scroll-view @scrolltolower="lowerBottom()" :refresher-enabled="true" :refresher-triggered="person.triggered" @refresherrefresh="getFresh()" scroll-x="false" scroll-y="true" class="scrollHeight">
</scroll-view>

<script lang="ts" setup>
import { reactive } from 'vue'
let person:any=reactive({
	triggered:false
})

// 下拉刷新
const getFresh=()=>{
	if(!person.triggered){
		person.triggered = true
		setTimeout(() => {
			person.triggered = false
		},500)
	}
	// 重新获取列表数据
	......
}
</script>

<style lang="scss" scoped>
.scrollHeight{
	height: calc(100vh - 490rpx);
}
</style>

希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~

禾小毅

关注

14
点赞
踩
48

收藏

觉得还不错? 一键收藏
0
评论
【uniapp】实现列表分页加载数据列表的方法，通过scroll-view下拉刷新，上拉加载的方法即可

1、通过上拉触底事件，累加下一页分页的数据到列表最后，并显示加载的效果2、再判断总页数是否已经累加完成，如果已完成，则提示 “没有数据了”
复制链接

扫一扫