【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 [全端兼容] - 详细实现列表上拉懒加载及“到底了“功能示例，数据列表下拉滑动页面触底后请求接口懒加载数据，自动计算分页/总条数、判断分页懒加载是否继续请求接口数据，以及数据没有了提醒！

🏆 前端领域优质创作者

10-07

4511

uni-app，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，列表，懒加载，触底加载，上拉页面触发加载，列表懒加载如何判断是否还需要继续请求接口，如何知道数据加载已经没有了停止继续请求，分页判断，列表滚动触底更新实现，页面滚动到底部后请求数据填充到data中，小程序上拉加载和下拉刷新，如何分页加载数据，实现上拉加载功能示例加载更多数据/触底加载/点击加载更多数据，数据分页请求，onReachBottom()，不生效，不触发的情况，列表下拉加载判断是否到底了，我是

关于uniapp+vue3中onReachBottom不生效的问题! 记录一下排查过程

代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。

03-22

1437

在使用 uniapp + Vue3 开发项目时，可能会遇到事件不触发的问题，明明已经配置了pages.json，但就是没有效果。今天就来分析一下可能的原因，并给出解决方案。

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

在 UniApp 中，实现下拉刷新

qq_44130891的博客

08-26

1715

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

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

最新发布

m0_57218017的博客

09-20

1392

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

uniapp和uview组件实现下拉触底刷新列表

青烟小生的博客

07-14

4617

以上示例使用了uView的LoadMore组件来实现下拉触底刷新列表，你可以根据自己的需求进行修改和调整，如改变请求的接口地址和参数，修改列表的渲染方式等。Hbuilder X 的插件市场进行引入使用，详情请看官网（建议使用）7、在生命周期添加下面内容。

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

GlowwormComrade的博客

05-31

1065

scroll-view触底加载。

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

cautionHua的博客

07-05

3519

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

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滚动触底加载 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触底加载、下拉刷新、返回顶部

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~

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` 方法，每次用户滚动到底部时都会触发这个方法来加载更多数据。如果正在加载数据，则不会重复触发。