当前位置：首页 > news >正文

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

news 2025/6/23 9:07:00

##标题

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

文章目录

一、为什么scroll-view?
1.1 区域滚动页面滚动？
1.2 代码？
二、分页功能？
2.1 如何实现？
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);}}