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

最新推荐文章于 2025-03-05 17:10:21 发布

sunly_

最新推荐文章于 2025-03-05 17:10:21 发布

阅读量1.5k

点赞数 2

分类专栏： uniapp 文章标签： uni-app javascript 前端

本文链接：https://blog.csdn.net/qq_40745143/article/details/138720628

版权

scroll-into-view：值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素

<scroll-view 
	:scroll-y="true" 
	class="danmu_scroll" 
	:show-scrollbar="false"

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

sunly_

关注关注

2
点赞
踩
2

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

uniapp聊天界面滚动到底部

奔跑吧代码

08-23

1619

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

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

weixin_30267785的博客

07-29

5448

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

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

微信小程序 scroll-view 滚动到页面底部

最新发布

weixin_51878863的博客

03-05

322

使用 wx.createSelectorQuery 获取 scroll-view 的内容高度，使用 scroll-top 设置竖向滚动条位置。

uni-app, 实现 scroll-view 自动滚动到底部，并控制触发频率

weixin_45559449的博客

09-22

6802

在频繁触发场景下，为了降低执行频率，可以增加节流函数 throttle，让 chatScrollTop 方法在规定时间内只执行一次，如果不需要可以忽略。当 scroll-view 内容改变时，调用 chatScrollTop 方法，就可以实现 scroll-view 内容区域自动滚动到底部效果。通过类名获取 scroll-view、和 scroll-view内容容器，得到两个元素的高度，动态设置 scrollTop 值。想要实现 scroll-view 滚动到底部，只需要让。

基于uniapp做的聊天系统中，使用scroll-view实现动态滚动到最底部

Boo_crob的博客

04-30

1万+

这里提到两个方法方法一：用整个scroll-view的高度减去所有聊天内容的高度，得到的就是滚动条需要下拉的距离，即可使聊天页下拉至最底部。参考文章：《uni-app 之聊天室滚到最底部》方法二：利用uniapp中的scroll-view组件的scroll-into-view属性具体使用方法请参考官网文档第一种方法：将聊天框封装成组件，并判断是谁发送的信息首先要给聊天内容部分封装成一个组件（不封装也可以），将组件中的对方和自己用v-if做一个判断，当接收的用户名（或者id，只要是唯一.

Web前端之UniApp移动端实现触底和触顶功能、微信小程序、置顶、置底、触发、onReachBottom、onPageScroll

CSDN博客主页地址：https://mengjian.blog.csdn.net/

07-04

2359

Web前端之UniApp移动端实现触底和触顶功能、微信小程序、置顶、置底、触发、onReachBottom、onPageScroll

uniapp聊天页面之消息滚动

宝子的博客

03-07

2064

刚进入页面的时候，有可能会没有滚动效果，这可能是因为消息列表的DOM节点还没有渲染到页面上，滚动的方法变已经执行了，导致滚动效果消失。所以调用的时候最好放在nextTick中。-view的高度减去所有聊天内容的高度，得到的就是滚动条需要下拉的距离，即可使聊天页下拉至最底部。-view一个固定的高度，并获取消息信息的高度。

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

weixin_72254790的博客

09-13

2381

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

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

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

07-30

4745

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

【uniapp】scroll-view 实现自动滚动到最底部

热门推荐

落叶随风将要去远方，看沿途的风景回忆一场...

11-17

2万+

在做uniapp项目中，有个滚动视图组件，跟微信小程序里的组件一样的，想要实现自动滚动到最底部，是一件容易忽略的，小事情。

uniapp关于scroll-view一直自动滚动到底部的功能

snoto的专栏

09-16

1万+

文章目录scroll-into-view使用scroll-top使用需求：一般在scroll-view中会放置一个list列表，当列表条目增加的时候，使其自动滚动到底部显示最后一条官方文档：scroll-view 有两个可用属性：声明scroll-into-view或者scroll-top 个人尝试后的结果，使用scroll-into-view在h5上有效，在微信小程序上无效；使用scroll-top在微信小程序也正常 scroll-into-view使用 <scroll-view scroll-

微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码

01-03

具体代码如下所示： // 1.scroll-y=true Y轴滚动 // 2.应该是设置了高才能行 // 3.使用scroll-top属性实现滚动到底部,scroll-top不要带单位 <scroll scroll-y=true xss=removed scroll-top={{scrollTop}}> <block wx:for={{recordList}} wx:key=item.id> <view> <text>{{item.text}}</text> </view> </scroll-vi

uniapp-chat:借助uni-app开发的 chat聊天界面

05-11

但是通过scroll-view使用竖向滚动时，需要给一个固定高度。为了适配屏幕的大小，则需要通过计算来确定scroll-view的高度。 <scroll-view id="scrollview" :style="{height:style.contentViewHeight+'px'}" :...

uni-app 聊天对话滚动到最底部

明日晴空的博客

08-06

1万+

uniapp 聊天界面-仿微信聊天界面设计

Andy的博客

11-14

5667

简介：本篇文章带来的是一格仿照微信设计的聊天界面，主要涉及到三个文件；下方已有介绍，代码块中也有相关说明，直接复制然后就可使用；注意获取消息的websoket和拉去历史消息的接口还是需要自己去写，下方只做大致参考；具体消息格式下方代码块中已列出一、聊天主界面chatIndex.vue <template> <view class="chat"> <scroll-view class="scroll-view" :style="{height: `${win

ScrollView滚动到底部3种方案（巧解现实产品一个需求）

小贱人_001的博客

07-06

1万+

3种实现ScrollView滚动到底部

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

weixin_44435242的博客

11-18

8392

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

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

weixin_48373171的博客

04-10

5281

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

uniapp:scroll-view触底加载返回顶部

09-19

1. 设置初始 `scroll-top` 为视图的高度减去底部缓冲区的距离，以便数据加载后能自动回弹到可视区域上方。 ```javascript <view class="scroll-view" scroll-top="{{scrollTop}}" @scrolltolower="loadMore"> ``` ...