uniapp默认滚动到底部

最新推荐文章于 2025-06-26 16:05:50 发布

原创最新推荐文章于 2025-06-26 16:05:50 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #前端 #vue.js

本文介绍了一种在uni-app中使滚动视图自动跳转到最底部的方法，通过设置scroll-top属性为一个足够大的数值来实现。这种方法适用于聊天应用等需要实时显示最新消息的场景。

uniapp默认滚动到底部

:scroll-top=“99999”
给scroll-top=设置个大值

<scroll-view :scroll-y="true" class="chat-box" :scroll-top="99999"></scroll-view>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Web995

关注关注

0
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

uniapp + vue 实现滚动条一直在元素的最底部

weixin_43168306的博客

09-13

7240

查了好多资料，花了近一天时间，才弄明白 uniapp + vue 如何实现滚动条一直在元素的最底部废话不多少，直接上上代码：使用 scroll-view 配合uni.createSelectorQuery() 以及boundingClientRect()即可实现； ...

uni-app 之聊天室页面滚动到底部

weixin_30267785的博客

07-29

5609

uni-app 之聊天室滚到最底部　　请注意！：知识点为uni-app 与 vue 结合　　这次写到聊天室，碰到一个emmmmm问题比较严重的事情，聊天嘛，咱们想实现的就无非是微信，QQ那种聊天的效果嘛，我们研究了，，，，emmmm （n久之长），终于是把这个功能写出来了，代码等什么时候整理出来给大家看，今天主要说一下碰到的一个问题，就是我发送消息的时候，想要将消息弹...

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

【Uniapp 】scroll-view 滚动条滚动到最底部

weixin_44435242的博客

11-18

8725

实时聊天等视图滚动到最底部，该方法不用计算容器的大小，宽高等问题

uni-app scroll-view 使滚动条滚动到最底部默认设置滚动条滚动到最底部

授人以渔的博客

09-11

1万+

scroll-view视图容器，可以设置横向滚动scroll-x以及纵向滚动scroll-y。如为scroll-x，则设置scroll-left为9999--此处只是一个示例，设置一个比较大的值即可，滚动条的位置就会展示在最右侧。如为scroll-y，则设置scroll-top为9999--此处只是一个示例，设置一个比较大的值即可，滚动条的位置就会展示在最底部。 ...

uniapp 滑到页面最底部

weixin_48969871的博客

04-18

2089

// 滑到页面最底部 // 滑到页面最底部 setTimeout(()=>{ uni.pageScrollTo({ scrollTop: 9999999, //滚动到页面的目标位置（单位px） duration: 0 //滚动动画的时长，默认300ms，单位 ms }); },100) 主要利用延时定时器，在数据加载完成之后调用 ...

uniapp：scroll-view 聊天对话自动滚动到底部

sunluyi的博客

05-11

1899

uniapp scroll-view 聊天对话自动滚动到底部。

uni-app（vue3）实现对话界面，滚动条处于最下方！

weixin_48373171的博客

04-10

6011

最近在做一个自己的全栈项目，前端用的，主要也是想巩固一下uni-app这方面的知识,其中有一个页面，涉及到ai聊天的功能，我理想型是类似文心一言或者微信聊天页面的效果，但是研究半天，发现uni-app的scroll-view这个内置组件并不能像写pc的滚动条那么灵活，因为在小程序或者app没有dom这个概念，网上找了一堆资源，基本上全是vue2版本的，密密麻麻的文字，真是看不下去，自己动手，丰衣足食。

uniapp自动滚动到底部

qq_34631220的博客

05-21

4638

scroll-into-view使用 <scroll-view scroll-y="true" style="height: 400rpx;" :scroll-into-view="bottomId" scroll-with-animation="true"> <view v-for="(item,index) in list"> <view :style=" 'height: 180rpx; background-color:' + ...

uniapp scroll-view 怎么通过代码控制滚动到底部

前端原创分享，常年坚持记录和分享，全网阅读量超百万

07-30

6499

这些方法都可以实现将 scroll-view 滚动到底部的效果[1][2][4]。选择哪种方法取决于你的具体需求和场景。第一种方法最简单,第二种方法可以更精确地控制滚动位置,第三种方法则更加灵活,可以适应不同的布局情况。在使用这些方法时,记得在适当的时机调用滚动方法,比如在数据更新后或者在用户触发某个操作后[4]。另外,为了提高性能,可以考虑使用节流函数来控制滚动方法的调用频率[4]。

uni-app 聊天界面滚动到消息底部

weixin_72254790的博客

09-13

2749

那么思路已经很清晰了，使用uni.pageScrollTo 让滚动到目标位置（scrollTop）设置为页面的高度不就可以了？uni.createSelectorQuery()锁定scroll-view的id，使用NodesRef对象返回的只有height信息。

UniApp 自定义滚动条实现

最新发布

cj641809386的专栏

06-26

1431

在移动端开发中，系统默认的滚动条往往无法满足UI设计的需求。本文将详细介绍如何在UniApp中实现一个完全自定义的滚动条，该滚动条不仅外观可控，还能根据内容比例动态调整宽度，提供更好的用户体验。

uniapp scroll-view 默认滚动到底部

04-26

在使用 uniapp 中的 scroll-view 时，默认是不会自动滚动到底部的。不过，可以通过监听 scroll-view 的滚动事件，来实现滚动到底部的效果。具体实现方式如下： 1. 给 scroll-view 组件绑定滚动事件：@scroll=...

关于 uniapp scroll-view聊天自动滚动到底部

qq_36639113的博客

05-25

3790

需求：一般在scroll-view中会放置一个list列表，当列表条目增加的时候，使其自动滚动到底部显示最后一条效果图下图：刚开始进入的时候这里自动撑开了点击加号图标恢复原来的样子

关于uniapp页面滚动到指定元素问题以及uview折叠面板（Collapse）通过api方式展开其中的某一项

西风的第一个影子的博客

01-22

343

关于uniapp页面滚动到指定元素问题和uview折叠面板（Collapse）通过api方式展开其中的某一项

(uniapp) 小程序scroll-view 自动滑动到最底部

不乱于心, 不困于情,不畏将来,不念过往

04-01

4412

小程序scroll-view 自动滑动到最底部简介scroll-into-view开始布局部分示例js部分页面完全代码简介由于项目需要最近在写一个客服聊天界面以及功能 scroll-view 是必不可少的! 这里需要用到 scroll-view 的标签属性 scroll-into-view scroll-into-view 值应为某子元素id id不能以数字开头设置哪个方向可滚动，则在哪个方向滚动到该元素开始布局部分示例 <scroll-view scroll-y="true"

uniapp聊天界面滚动到底部

奔跑吧代码

08-23

2372

uniapp中scroll-view聊天界面滚动到底部展示最新消息

Uniapp滚动到底部

shuleijia的博客

12-27

4867

scrollToBottom() { this.$nextTick(function() { setTimeout(() => { uni.pageScrollTo({ scrollTop: 99999, duration: 0 }) }, 200) // 要加点延迟, 不然有可能不生效 }); } ...

vue和uniapp页面自动滚动到最底部