微信小程序开发聊天框使用scroll-view的scroll-top使滚动条在最底部

奔跑吧前端菜鸟

已于 2024-03-07 16:53:31 修改

阅读量657

点赞数 9

分类专栏：前端文章标签：微信小程序 uni-app

于 2024-03-07 16:53:09 首次发布

本文链接：https://blog.csdn.net/wanhongxu/article/details/136538561

版权

前端专栏收录该内容

5 篇文章 1 订阅

订阅专栏

文章讨论了在网页中使用scroll-top属性时遇到的问题，即初次滚动正常，后续位置不准确。解决方法是通过检测scroll-top值的变化，如输入框失去焦点时，重新计算并设置真实的高度值使其生效。

摘要由CSDN通过智能技术生成

问题：当时用scroll-top默认只有第一次会滚动底部，其他的滚动位置不准或不滚动。

解决办法：在不断测试发现scroll-top属性只有发生变化的情况下才会生效。
so 当弹窗键盘时 scroll-top的绑定值不等于原来的值即可。当输入框失去焦点 在通过计算获取真实的高度赋值。

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

奔跑吧前端菜鸟

关注关注

9
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
微信小程序开发聊天框使用scroll-view的scroll-top使滚动条在最底部

当时用scroll-top默认只有第一次会滚动底部，其他的滚动位置不准或不滚动。
复制链接

扫一扫

专栏目录

scrolltop最底部_奇怪的 scrollTop 赋值不成功，另起炉灶

weixin_39932458的博客

01-26

751

上一次记得记录了一下关于 vue 移动端聊天框，如何将滚动条自动置底的问题，可以当我使用的时候却各种碰到问题，比如下面的代码，在组件中，似乎是不起作用，经过我的验证，但是不知道为什么会赋值不成功呢？还有待研究上一篇文章如下前端工程师：如何让移动端聊天框的滚动条自动置底zhuanlan.zhihu.comdocument.documentElement.scrollTop = document...

详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现

10-17

主要介绍了详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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

微信小程序scroll-view的滚动条设置实现

10-15

主要介绍了微信小程序scroll-view的滚动条设置实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

微信小程序：scroll-view自动滚动到最底部，附view标签滚动到底部方法

最新发布

sunluyi的博客

05-11

594

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

微信小程序 scroll-view 实现自动滑动到底部

热爱思考、活力满满、开朗爱笑的年轻人

11-18

7418

<scroll-view class="scroll-wrapper" scroll-into-view="{{scrollTo}}" scroll-y="true" bindscroll="messageListScrolling" > <block wx:for="{{messageList}}" wx:key="id"> <view>你的scroll-view中的内容</view> </block> &lt

微信小程序scroll-view滚动条始终再最底部，实现自动滚动的效果

yueyue1111111的博客

07-06

6397

微信小程序scroll-view的使用

微信小程序使用scroll-view标签实现自动滑动到底部

Min_nna的博客

11-15

1580

【代码】微信小程序使用scroll-view标签实现自动滑动到底部。

微信小程序让页面自动滚动到底部，

qq_43358160的博客

10-09

5300

需求用户进入聊天页，页面自动滚动到底部，每发一条消息或接收到一条消息也是最底部实现 1、给需要滚动的view加上ID 2、在data中加上公共变量scrollTop data(){ scrollTop: 0 } 3、在onShow（）总加上以下代码 let that = this; wx.createSelectorQuery().select('#viewCommunicationBody').boundingClientRect(function (rect) { wx.pageScrol

让DIV的滚动条自动滚动到最底部scrollTop

一位前行者的博客

08-12

1838

制作一个在线聊天的程序，在做最后的修饰时，需要对获得的信息即时滚动以保证用户总能看到最新消息。聊天程序是基于websocket设计的，消息容器是一个DIV，所以问题就在于如何控制DIV的滚动条。这里推荐一个好用的一个平台（如流）： http://hi.baidu.com/chen1345789/blog/item/de727bfb45587b176d22eba1.html 让滚动条自动有新信息滚动到底部首先请求websocket // test 是vue里封装的axios请求--params为带参 t

微信小程序scroll-view组件实现滚动动画

08-28

微信小程序 scroll-view 组件实现滚动动画 微信小程序 scroll-view 组件是一种常用的滚动容器组件，通过设置 scroll-into-view 和 scroll-with-animation 属性可以实现滚动动画效果。在本文中，我们将详细介绍如何...

微信小程序 scroll-view隐藏滚动条详解

01-03

在书写网页的时候，往往会为了页面的美观，而选择去掉滚动区域默认的滚动条，而在这里，就是为小程序去掉滚动条的其中的一种方法： scroll-view.wxml: scroll-view.wxss scroll-view.js 最终显示效果如下; ...

微信小程序scroll-view仿拼多多横向滑动滚动条

01-03

本文实例为大家分享了微信小程序横向滑动滚动条的具体代码，供大家参考，具体内容如下效果图实现代码 index.wxml <scroll scroll-x=true class=scroll-view-x xss=removed scroll-with-animation=true wx:if={...

微信小程序scroll-view组件使用scroll滑动事件中的scrollTop有时不为0的问题

wcxrib的博客

01-21

655

解决方法：添加throttle="{{false}}" 属性，关闭官方默认节流，保证scroll事件能全部触发，自己实现节流即可。uni-app语法 :throttle="false"。问题： scroll-view的scroll滑动事件，经常会有这样的问题：scroll-view滑动到顶部后，最后的事件中的scrollTop不为0 、toupper事件也没有收到等。原因：scroll-view组件自带节流，所以滑动过快时，会出现滑到顶部，scrollTop不为0的bug。

vue-easytable v2.11.0 表格通过scrollTo滑动到最底部

xufulin2的博客

12-07

1044

官方文档链接：https://happy-coding-clans.github.io/vue-easytable/#/zh/doc/table/instance-methods 如官方文档描述，先给table添加个 ref 标签 <template> <ve-table ref="tableRef" :columns="columns" :table-data="tableData" :border-x="true" :border-y="tr

微信小程序scroll-view滚动scrollTop不准确

woshiabc111的博客

05-16

2000

如果在方法内写this.setData这种赋值的操作小程序可能会卡死无法滑动，建议在scrollTop到达一定数值后在进行操作，比如scrollTop=0先判断时候滑动到顶部或者底部，再来控制其他view的显示隐藏。1.这是因为每次滚动监听事件都会被调用比较耗费资源系统会默认节流可以在scroll-view 加一个 throttle=“{{false}}” 关闭节流。2.减少scroll方法内的操作因为scroll-view内随便滑动一下监听事件可能。小程序里使用scroll-view。

微信小程序（滚动吸顶）

weixin_43837268的博客

06-06

876

【代码】微信小程序（滚动吸顶）

uniapp聊天页面之消息滚动

宝子的博客

03-07

1399

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

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

keaicll的博客

11-07

2381

【代码】scroll-view 实现自动滚动到最底部。

微信小程序中实现滚动条事件的绑定方法是

06-08

微信小程序中实现滚动条事件的绑定方法是通过 `bindscroll` 属性来绑定。`bindscroll` 属性是一种事件绑定方式，可以在小程序的 `wxml` 文件中为一个组件绑定滚动条事件，当组件滚动时触发相应的事件处理函数。例如，下面的代码实现了一个 `scroll-view` 组件，并为其绑定了 `bindscroll` 事件： ```html <scroll-view scroll-y="true" bindscroll="onScroll"> <view class="content">滚动内容</view> </scroll-view> ``` 在上述代码中，`scroll-view` 组件的 `scroll-y` 属性设置为 `true`，表示允许竖向滚动；`bindscroll` 属性绑定了一个名为 `onScroll` 的事件处理函数。当用户滚动 `scroll-view` 组件时，会触发 `onScroll` 函数。在小程序的 `js` 文件中，可以定义 `onScroll` 函数，并在函数中处理滚动条事件。例如，下面的代码实现了一个 `onScroll` 函数，用于在控制台输出滚动条的位置： ```javascript Page({ onScroll: function(event) { console.log(event.detail.scrollTop) } }) ``` 在上述代码中，`Page()` 方法用于定义一个页面，其中 `onScroll()` 方法被定义为事件处理函数。当用户滚动 `scroll-view` 组件时，会触发 `onScroll()` 函数，并将滚动条位置作为参数传递给函数，函数通过 `console.log()` 方法将滚动条位置输出到控制台。

微信小程序开发聊天框 使用scroll-view的scroll-top使滚动条在最底部

问题：当时用scroll-top默认只有第一次会滚动底部，其他的滚动位置不准或不滚动。

微信小程序开发聊天框使用scroll-view的scroll-top使滚动条在最底部