企业品牌网站建设公司免费建自己的网站
##标题
用来总结和学习，便于自己查找
文章目录
一、为什么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);}}
解释一下：这个就是触底触发的函数， page_index: this.page,触底之后 this.page要加一，请求下一页的数据page_size这个就是每页显示的条数,res.end这个就是总条数，要是达到总条数就不加载了