解决uni-app滚动到底部自动更新的问题

于 2024-05-06 15:50:42 发布
阅读量177 收藏
点赞数 2
文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_57477371/article/details/138497427
版权

在使用uni-app开发移动端项目时，经常会涉及到分页的情况，但是又不能像pc端那样，通过点击按钮进行换页，这样用户体验不够好

所以需要一个可以解决，当用户滑动到底部时，内容自动加载下一页的一个解决方法

onReachBottom()

onReachBottom()是uni-app的一个小的生命周期，他会在滑到底部时，自动触发，不需要下载插件，是uni-app自带的

再提一下，如果是子组件里的内容需要换页，可以在父组件调用onReachBottom()生命周期，再使用  this.$refs.方法()   来调用子组件的换页事件，因为直接在子组件调用onReachBottom()，可能不生效

星宇23
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp + vue 定位聊天最新消息 实现滚动条一直在元素的最底部
精灵码农
12-13 2682
使用 scroll-view 配合uni.createSelectorQuery() 以及boundingClientRect()即可实现； <scroll-view id="scrollview" class="chat-window" scroll-y="true" :style="{height: style.contentViewHeight + 'px'}" :scrol...
uni-app 社交 下拉加载历史消息记录，滚动到下拉之前，不闪
05-19
社交应用中，onPullDownRefresh下拉加载历史消息，与页面上的消息合并，滚动到下拉之前，页面不闪
uni-app 实现聊天页面滚动到最底部
01-23
uni-app 实现聊天页面滚动到最底部
uni-app 聊天内容自动滚动到底部
05-16
uniApp 实时聊天功能，当输入发送聊天消息后，聊天区域中的内容可以自动滚动到底部，以显示最新消息；
uni-app, 实现 scroll-view 自动滚动到底部，并控制触发频率
weixin_45559449的博客
09-22 3537
在频繁触发场景下，为了降低执行频率，可以增加节流函数 throttle，让 chatScrollTop 方法在规定时间内只执行一次，如果不需要可以忽略。当 scroll-view 内容改变时，调用 chatScrollTop 方法，就可以实现 scroll-view 内容区域自动滚动到底部效果。通过类名获取 scroll-view、和 scroll-view内容容器，得到两个元素的高度，动态设置 scrollTop 值。想要实现 scroll-view 滚动到底部，只需要让。
uniapp scroll-view滑到底部加载更多数据
Mybabyying的博客
07-13 3210
进入页面加载完请求第一页数据（onLoad）或者切入前台请求（onShow），根据需求修改，我这里是onLoad。必须设置下面两个属性。
【uniapp】scroll-view 实现自动滚动到最底部
TA远方
11-17 2万+
在做uniapp项目中，有个滚动视图组件，跟微信小程序里的组件一样的，想要实现自动滚动到最底部，是一件容易忽略的，小事情。
uniapp 聊天输入框会带动聊天内容区域滚动
weixin_44708030的博客
12-15 1091
在做uniapp聊天时候会出现，聊天输入框内容过长时候滚动输入框内容，会带动底部消息区域也会滚动，导致用户体验不好
前端uniapp列表下拉到底部加载下一页列表【下拉加载页面/带源码/实战】
m0_49714202的博客
11-17 1103
前端uniapp列表下拉到底部加载下一页列表【下拉加载页面/带源码/实战】
uniapp实现滚动到底部加载更多数据
sslcsq的博客
09-29 9888
如果数据量非常大的话，数据批量加载是一种优化手段，那么，如何实现？ onReachBottom uniapp的生命周期onReachBottom 页面滚动到底部的事件（不是scroll-view滚到底），常用于上拉加载下一页数据。如使用scroll-view导致页面级没有滚动，则触底事件不会被触发 这种方式适用于单个页面，如果同一个页面有多处滚动，那么就该使用scroll-view scroll-view 可滚动视图区域。用于区域滚动 onReachBottom示例： ...
uniapp-chat:借助uni-app开发的 chat聊天界面
05-11
在mui中有chat界面的例子，升级到uni-app后，没有类似的模板，因此模仿写了一个。遇到了一些坑，在此一一记录下来。当然，由于是新手，可能有些坑可以避开。 scroll-view高度的设置 输入内容后，必然要在对话界面的...
令按钮悬浮在(手机)页面底部的实现方法
08-30
下面小编就为大家带来一篇令按钮悬浮在(手机)页面底部的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
uniapp滚动加载 下拉刷新
2303_76218115的博客
06-01 1万+
在日常开发中，滚动加载和下拉刷新是非常常见的功能，页面数据过多时，需要滚动加载优化性能，本篇技术分享博客将介绍如何在uniapp中实现滚动加载和下拉刷新。至此，我们已经成功地实现了滚动加载和下拉刷新两种常见的移动端功能。大家可以进行扩充或者留言交流！通过以上示例代码，我们可以看到uniapp提供了非常方便的API来实现这些功能，使得开发者可以更加专注于业务逻辑的实现。
基于uniapp做的聊天系统中，使用scroll-view实现动态滚动到最底部
Boo_crob的博客
04-30 1万+
这里提到两个方法 方法一：用整个scroll-view的高度减去所有聊天内容的高度，得到的就是滚动条需要下拉的距离，即可使聊天页下拉至最底部。 参考文章：《uni-app 之 聊天室滚到最底部》 方法二：利用uniapp中的scroll-view组件的scroll-into-view属性 具体使用方法请参考官网文档 第一种方法： 将聊天框封装成组件，并判断是谁发送的信息 首先要给聊天内容部分封装成一个组件（不封装也可以），将组件中的对方和自己用v-if做一个判断，当接收的用户名（或者id，只要是唯一.
[uni-app]记录APP端跳转页面自动滚动到底部的bug
最新发布
iOSTianNan的博客
11-20 1200
此处代码仅在 onLoad中调用, 按理说和点击事件毫无关系。所以在路由跳转后, A页面的该回调函数被调用,此时的回调触发。1.点击的A页面, 跳转到了B页面, 第一次页面正常显示。3.A页面不进行任何操作,再次点击A页面进入B页面。最后排查发现 问题出在事件循环上。4.B页面自动滚动到底部.或者在A页面做逻辑判断。2.从B页面返回A页面。就造成了在B页面诡异的。
uniapp实现触底加载更多
qq_51130780的博客
06-04 2385
还有一点处理小技巧，如果我们通过触底来将分页中的当前页++的话，可能就会出现用户触底后会滚又触地，导致我们请求没返回又发送相关请求，从而导致页面数据出错。因为虽然目前可能软件或者项目中的数据不多，可能也就十多行，但是如果随着项目的不断扩大，其对应的数据也成百上千的增加，如果我们还是按照原来那样一次性的将所有数据请求回来。如果用于实际项目中的话，我们可以将对应的下拉刷新所添加的数据转化为真实数据。当用户滚动到页面底部时，自动加载下一页数据，实现无缝的数据展示，使用户可以连续浏览数据而无需手动触发加载操作。
uni-app页面上下滑动关闭(页面回弹问题)
热门推荐
成的博客
03-30 4万+
这个问题很烦,因为上下拉的时候会出现空白页,很难看！我一开始以为是上拉/下拉刷新没关,但后面试了很多方法都没用,查看官方文档的时候很诡异,在app-plus下有一个回弹属性,将它改为false,页面就OK了！ 上代码 "pages": [ //pages数组中第一项表示应用启动页 { "path": "pages/login/login", "style": { "nav...
uniapp利用scroll-view实现滚动触底加载
cautionHua的博客
07-05 3060
微信小程序官方在scroll-view中也提供了一种触底加载的方式，也没有我写的这么复杂，在uniapp中要改写成vue的方式。可以使用以下这种方式来做滚动触底加载，但是官网提示长列表性能不太好，目前也没有更好的方式，暂时先这么处理。才能生效，两个方式各有优劣，选择适合自己的就行了。
uni-app瀑布流
09-13
Uni-app 是一个基于 Vue.js 开发跨平台应用的框架，它可以将代码编译成多个平台下的原生应用。瀑布流是一种常见的页面布局方式，它可以自动将内容按照一定的规则进行排列，形成类似瀑布流水流般的效果。 在 Uni-app 中实现瀑布流布局，你可以使用以下步骤： 1. 在页面中引入需要使用瀑布流布局的组件，例如 `uni-list` 或者自定义组件。 2. 使用 `v-for` 指令遍历数据，生成需要展示的元素。 3. 使用 CSS 样式对生成的元素进行布局，可以使用 Flex 布局或者 Grid 布局来实现瀑布流效果。 4. 可以通过监听页面滚动事件，在滚动到底部时加载更多数据。 具体实现方式可以参考 Uni-app 官方文档中的相关示例和教程，例如在 `uni-list` 组件中使用瀑布流布局。 希望以上信息对你有所帮助！如果还有其他问题，请继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值