uniapp上拉加载 加载更多 uni-load-more组件使用

1、给渲染的数据加上滚动加载 和 uni-load-more 组件

<scroll-view class="list" scroll-y="true">

</scroll-view>

<uni-load-more :status="status" :content-text="contentText" />

2、引入组件 和 数据初始化

import uniLoadMore from "@/uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue"
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				searchValue: '',
				universityList: [],
				page: 1,
				limit: 10,
				status: 'more',
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
			}
		},

3、加上下拉刷新和上拉加载

下拉刷新的时候将 页码重置为1

上拉加载的时候 如果没有更多则不加载数据 否则 page ++ 然后获取第二页的数据

        //下拉刷新
		onPullDownRefresh() {
			this.page = 1;
			uni.stopPullDownRefresh();
			this.universityList = [];
			this.getUniversityList()
		},
		//上拉加载
		onReachBottom() {
			if (this.status == 'noMore') {
				return;
			}
			this.page++;
			this.getUniversityList();
		},

4、接收数据 如果页码为1 则直接赋值 否则 加上之前的数据

判断数据的长度是否小于 我们需要的长度 如果小于 那就是没有更多数据 

                    if (this.page === 1) {
						this.universityList = res.data;
					} else {
						this.universityList = this.universityList.concat(res.data);
					}
					// 判断是否还有更多数据
					if (res.data.length < this.limit) {
						this.status = 'noMore'; // 没有更多数据
					} else {
						this.status = 'more'; // 还有更多数据
					}

完整代码

<template>

	<view class="main">

		<view class="top-content">
			<view class="search">
				<view class="ipt">
					<image class="searchPic" src="../../static/img/searchpic.png"></image>
					<input class="searchIpt" v-model="searchValue" type="text" placeholder="请输入搜索内容"
						placeholder-style="color:#E5E5E5;font-size:24rpx;font-weight:400;">
				</view>
				<view class="btn">
					<button class="searchBtn" @click="onSearch">搜索</button>
				</view>
			</view>
		</view>

		<view class="content">
			<scroll-view class="list" scroll-y="true">
				<view class="university" v-for="(item,index) in universityList" :key="index" @click="go(item.id)">
					<view class="universityNav">
						<view class="universityInfo">{{item.code}} {{item.name}}</view>
						<view>
							<image class="go" src="../../static/img/in.png"></image>
						</view>
					</view>
				</view>
			</scroll-view>
			<uni-load-more :status="status" :content-text="contentText" />
		</view>

	</view>

</template>

<script>
	import uniLoadMore from "@/uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue"
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				searchValue: '',
				universityList: [],
				page: 1,
				limit: 10,
				status: 'more',
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
			}
		},
		onLoad() {
			this.getUniversityList()
		},
		//下拉刷新
		onPullDownRefresh() {
			this.page = 1;
			uni.stopPullDownRefresh();
			this.universityList = [];
			this.getUniversityList()
		},
		//上拉加载
		onReachBottom() {
			if (this.status == 'noMore') {
				return;
			}
			this.page++;
			this.getUniversityList();
		},
		methods: {
			async getUniversityList() {
				let res = await this.$myHttp.post({
					url: this.$myHttp.urlMap.getVideoUniversityList,
					data: {
						page: this.page,
						limit: this.limit,
						name: this.searchValue
					},
					needLogin: true
				})
				if (res.code == 1) {
					if (this.page === 1) {
						this.universityList = res.data;
					} else {
						this.universityList = this.universityList.concat(res.data);
					}
					// 判断是否还有更多数据
					if (res.data.length < this.limit) {
						this.status = 'noMore'; // 没有更多数据
					} else {
						this.status = 'more'; // 还有更多数据
					}
				}
			},
			onInput(event) {
				console.log(event)
				this.searchValue = event.target.value;
			},
			// 监听搜索框输入事件
			onSearch() {
				this.page = 1; // 重新搜索从第一页开始
				this.universityList = [];
				this.getUniversityList();
			},
			go(id) {
				uni.navigateTo({
					url: '/pages/video/video?id=' + JSON.stringify(id)
				});
			}
		}
	}
</script>

   

原创链接 在基础上做修改

uni-app 上拉加载 使用uni-ui 的 LoadMore 组件_uni-load-more 上拉没反应_O3ohn的博客-CSDN博客https://blog.csdn.net/ka_xingl/article/details/110083976