uniapp区域滚动——上划进行分页加载数据（详细教程）

bug总结2025-01-11 16:42

##标题

用来总结和学习，便于自己查找

文章目录

一、为什么scroll-view?

[1.1 区域滚动页面滚动？](#1.1 区域滚动页面滚动？)

[1.2 代码？](#1.2 代码？)

二、分页功能？

[2.1 如何实现？](#2.1 如何实现？)

[2.2 代码？](#2.2 代码？)

一、为什么scroll-view?

复制代码

解释：因为我要实现区域滚动以及分页加载，刚开始使用css的overflow 样式但是实现分页的时候检测不到，
就先只能用scroll-view来实现、但是文档写到会影响性能，暂时数据少感觉不出来先用着，查到还有实现区
域滚动的方法虚拟滚动、<u-list> 和 u-pagination这几种方法、后续可以试一试要是能试通会写在后续文章
里面

1.1 区域滚动页面滚动

就是不是再整个页面进行滚动，而是上面有一部分东西，底下有一部分进行滚动就如底下图片所示

1.2 代码

复制代码

	<scroll-view style="height: 70vh;" :scroll-top="scrollTop" scroll-y="true" @scroll="onScroll"
				@scrolltolower="onScrollToLower" lower-threshold="50">
				<!-- <view class="alalmlist" bindscroll="onScroll"> -->
				<view class="care" v-show="careShow" v-for="(item, index) in notification" :key="index">
					<view class="careText">
					</view>
				</view>
				<!-- </view> -->
			</scroll-view>

scroll-view把你遍历的东西包裹起来就行style="height: 70vh;"这个要设置高度@scrolltolower="onScrollToLower" lower-threshold="50"这个就是触底50的时候检测到就触发了onScrollToLower这个函数写分页逻辑即可

二、分页功能？

后台的分页见过哈，一样的不过是竖着的

2.1 如何实现？

思路就是用到触底函数scrolltolower就是上面我说的，触底的时候加载分页，（这个说明一下，后端给你同一个接口里面有两个参数pages,和pagesize,第一个参数pages就是一页的意思，pagesize就是每页有多少条，然后后段会给你返回一个总条数加载完停止加载用的）

2.2 代码？

复制代码

		async searchFoods() {
				try {
					const res = await list({
						action: "list",
						page_index: this.page,
						page_size: "5"

					});
					if (res.Status) {
						const data = res.Result;
						if (res.end<= this.notification.length) {
							return
						}
						this.notification.push(...data)
					}
				} catch (err) {
					console.log(err);
				}
			}

解释一下：这个就是触底触发的函数， page_index: this.page,触底之后 this.page要加一，请求下一页的数据page_size这个就是每页显示的条数,res.end这个就是总条数，要是达到总条数就不加载了