【uniapp，触底加载，下拉刷新】【h5】滚动区域滚动触发触底加载 scroll-view

原创

已于 2024-01-23 09:34:57 修改 · 4.3k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #javascript #前端

于 2023-02-20 11:44:08 首次发布

文章讲述了在uni-app框架内如何使用scroll-view组件创建可滚动视图，并配置触底加载(onReachBottom)和下拉刷新(onPullDownRefresh)功能。通过设置页面JSON风格以及在JS中定义相关事件处理函数，可以实现滚动到底部自动加载更多内容和下拉时刷新页面的效果。

在这里插入图片描述
scroll-view 可滚动视图区域。用于区域滚动。

template

<scroll-view
				scroll-y="true"
				class="scrollbox"
				@scrolltolower="lower"
				enable-back-to-top="true" 
				lower-threshold="112"
			>
			    // 主要内容
				<view></view>
 </scroll-view>

script

lower(){
   
   
	 console.log('触底加载')
},

css

.scrollbox{
   
   
	height: calc(100vh - 580rpx

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

嘿，小苹果

关注关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

uniapp中使用scroll-view实现后台数据的触底加载

GlowwormComrade的博客

05-31

1065

scroll-view触底加载。

UniApp 实战：快速实现下拉刷新与上拉加载更多功能

最新发布

m0_57218017的博客

09-20

1393

本文详细介绍了在UniApp中实现列表下拉刷新和上拉加载功能的完整方案。通过配置pages.json启用下拉刷新，利用onPullDownRefresh和onReachBottom生命周期函数监听用户操作，结合页码管理实现数据分页加载。文章提供了完整的代码示例，包括列表渲染、数据加载逻辑以及样式处理，并针对常见问题给出解决方案。同时提出了性能优化建议和功能扩展方向，帮助开发者提升列表交互体验，适用于电商、资讯等各类列表场景。该方案跨平台兼容，是UniApp开发中的实用技巧。

参与评论您还未登录，请先登录后发表或查看评论

在 UniApp 中，实现下拉刷新

qq_44130891的博客

08-26

1715

-- 自定义下拉刷新提示 --><text class="refresh-text">正在刷新...</text></view>-- 页面数据列表 --></view>

uniapp利用scroll-view实现滚动触底加载

cautionHua的博客

07-05

3519

微信小程序官方在scroll-view中也提供了一种触底加载的方式，也没有我写的这么复杂，在uniapp中要改写成vue的方式。可以使用以下这种方式来做滚动触底加载，但是官网提示长列表性能不太好，目前也没有更好的方式，暂时先这么处理。才能生效，两个方式各有优劣，选择适合自己的就行了。

uniapp scroll-view滚动触底加载 height高度自适应

在职可交流前端开发，包括：web端、uniapp等，欢迎指教。

08-30

2036

uniapp 的组件scroll-view在实现触底加载的功能的时候，首先在App上可以滚动，就必须设置高度；触底加载的动态效果，会发起网络请求的，不用设置height，通过css设置min-height:0

uniapp使用 scroll-view 进行触底加载列表

F2601775592的博客

12-05

1566

这列需要设置高度，一开始我没有设置高度触底没有作用。1.template部分。2.script部分。

uni app 使用scroll view 实现自定义组件中的触底加载

qiuqiu9325的博客

11-13

4540

使用scroll view 实现自定义组件中的触底加载前言：在自定义组件中onPullDownRefresh与onReachBottom 上拉刷新与触底加载事件不起作用，但是我们在业务需求中需要实现此功能，这里可以借用scroll view 组件 scroll-view的官方文档：https://uniapp.dcloud.io/component/scroll-view?id=scroll-view 如上图所示：可利用@scrolltolower与@refresherrefresh实现上拉刷新与触底加

uniapp scroll-view 横向和纵向滚动带滚动回调

09-10

6. **优化滚动性能**：为了提高滚动的流畅度，可以使用`<scroll-view>`的`upper-threshold`和`lower-threshold`属性来设定上拉和下拉即将触底时的阈值，提前加载数据。同时，还可以利用`loading`组件配合`scroll-...

uniapp scroll-view解析

qq_36158551的博客

08-02

1207

在使用scroll-view组件实现下拉刷新功能时，需要在scroll-view上绑定refresher-triggered属性，并在data中定义该属性，默认设置为false。在 UniApp 中，@refresherabort 是 scroll-view 组件的一个事件，当用户在下拉刷新过程中取消刷新操作时，会触发 @refresherabort 事件。通常在下拉刷新完成后，需要将refresher-triggered属性设置为false，以隐藏刷新图标并恢复视图状态。

Uniapp 页面开发实战教程：导航栏配置、下拉刷新与上拉加载

xkxnq的专栏

09-02

479

在中配置全局/页面级导航栏：核心参数说明：步骤1：开启配置步骤2：页面逻辑处理自定义样式：步骤1：监听页面滚动事件步骤2：优化加载提示 下拉刷新不生效：上拉加载多次触发：导航栏样式异常：

uniapp：scroll-view触底加载、下拉刷新、返回顶部

FIRE

05-18

3522

选择uniapp自带的下拉刷新还是scroll-view看场景。场景：从首页跳转到别的页面再返回来的时候，直接返回首页顶部。顺便解决了ios下拉，顶部和底部有白屏的问题。

uniapp scroll-view 滑动到底部加载更多数据

m0_73199810的博客

11-28

441

uniapp scroll-view 滑动到底部加载更多数据

【uniapp】实现触底加载数据

春天的波菜

10-16

2061

实现界面触底数据加载。后端接口得支持翻页传参（本案例使用django）

微信小程序触底加载scroll-view

共同进步

06-19

9276

微信小程序触底加载scroll-view 需求：有个固定高度的容器，实现容器里面的内容触底加载1、内容盒子的高度2、盒子里内容的总高度3、滚动条的scrollTop触底加载的原理就是当里面的容器触底的时候进行分页，请求接口合并数据公式盒子的高度+滚动条的scrollTop = 内容高度使用原生的计算方法比较麻烦因此市面上有很多关于触底加载的插件我们这里使用的是 uni-app 里面的。

uniapp-实现触底加载&拼接新数据~

LCKNOW的博客

04-02

2573

后端接口"分页"的实现推测~uniapp如何实现触底加载&拼接新数据~在此实现下,同一页内容选项卡跳转须注意防止的两个bug~

02-20

8854

scroll-view组件和onReachBottom触底方法,以及部分安卓机型scroll-view很难触发问题,且可以固定表头

uniapp滚动加载

weixin_42812634的博客

06-18

903

uniapp实现滚动加载，先获取10条数据，滚动到底时，再获取10条数据，以此类推，直至没有数据为止。4. 当滚动到底部时，调用refreshData。2. 在data中定义。

uniapp scroll-view滑到底部加载更多数据

Mybabyying的博客

07-13

4709

进入页面加载完请求第一页数据（onLoad）或者切入前台请求（onShow），根据需求修改，我这里是onLoad。必须设置下面两个属性。

uniapp 触底加载

09-13

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，能够编译到iOS、Android、H5、以及各种小程序等多个平台。触底加载（通常称为“上拉加载更多”或“下拉刷新”）是一种常见的用户交互设计，用于在用户滚动到页面底部时加载更多内容。在 uni-app 中，可以利用框架提供的 API 或者自己编写逻辑来实现触底加载。具体实现上，可以通过监听滚动事件，并在滚动到底部时执行数据加载的逻辑。在 uni-app 中，可以使用 `scroll-view` 组件或页面的滚动事件监听来完成这一功能。以下是一个简单的实现逻辑示例： 1. 在页面的 `onReachBottom` 事件中触发数据加载函数。 2. 数据加载完成后，更新页面数据并重新渲染。 3. 为了避免重复加载数据，可以设置一个标志位，表示是否正在加载数据。代码示例： ```javascript export default { data() { return { listData: [], // 页面显示的数据列表 isLoading: false // 是否正在加载数据的标志 }; }, methods: { loadMoreData() { if (this.isLoading) return; // 如果正在加载，则不再加载 this.isLoading = true; // 设置标志为true，表示正在加载 // 这里执行实际的数据加载逻辑，比如调用API获取更多数据 // 假设加载成功后执行回调函数 this.fetchDataCallback(() => { this.isLoading = false; // 加载完成，将标志设置为false }); }, fetchDataCallback(callback) { // 模拟数据加载的异步操作 setTimeout(() => { // 假设每次加载10条数据 const newData = Array.from({ length: 10 }, (_, index) => index + this.listData.length); this.listData = this.listData.concat(newData); callback && callback(); }, 2000); } }, onReachBottom() { // 当页面滚动到底部时调用加载更多数据的方法 this.loadMoreData(); } }; ``` 在页面的 `onReachBottom` 事件中调用 `loadMoreData` 方法，每次用户滚动到底部时都会触发这个方法来加载更多数据。如果正在加载数据，则不会重复触发。