uni-app中scroll-view的scroll-top不生效问题(已解决)

最新推荐文章于 2024-04-05 14:34:26 发布
最新推荐文章于 2024-04-05 14:34:26 发布
阅读量7.1k 收藏 4
点赞数 1
分类专栏： uni-app 坑 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dujyong/article/details/105437464
版权
uni-app 同时被 2 个专栏收录
14 篇文章 1 订阅
订阅专栏
坑
9 篇文章 1 订阅
订阅专栏

uni-app中scroll-view的scroll-top不生效问题

项目中有聊天功能,每次收到消息需将滚动条固定在屏幕最底端,让最新的消息展示出来.使用到了scroll-view,但是他的scroll-top属性一直不生效.将其赋值为动态绑定的值也不生效,甚至每次收到消息都将它重新赋值都没有用.
上代码:
在这里插入图片描述
后来在文档中发现了这个东西,:
在这里插入图片描述
好吧.每次收到消息将它加1 ,ok,生效了.问题解决.
在这里插入图片描述

你头发乱了喔_
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
基于uni-app开发的新闻和资讯类App模板
02-22
基于uni-app开发的新闻和资讯类App模板
uniapp scroll-view 设置scrollTop无效
peachban的博客
11-03 1535
在实际运用过程中，发现设置了scroll-top无效，滚动条位置并没有发生变化，是因为微信小程序的官方框架处于性能考虑，初始化设置scroll-top不会重新渲染页面，需要将scroll-top的是放在一个事件内执行才可以生效。这里也有一个坑，如果事件执行时，scrollTop的值和原来一样，他是不会生效的(就算页面滚动了，但是scrollTop是不变的)，所以在触发回到顶部事件，重新赋值的时候，可以加一个0.0001，页面就会回到顶部了。这里有一个坑，初始值设置（注意：不要设置成0，不然无效）
uniapp中scroll-view的scroll-top不生效问题
qq_45632659的博客
07-11 3894
uniapp中scroll-view的scroll-top不生效问题
uni-app——uniapp 中 scroll-view 上下滑动卡顿
最新发布
qq_43201350的博客
04-05 464
uni-app——uniapp 中 scroll-view 上下滑动卡顿
踩坑记录：uniapp中scroll-view的scroll-top不生效问题；
qq_44776454的博客
12-05 1513
踩坑记录：uniapp中scroll-view的scroll-top不生效问题 的详细解决思路
uniapp scroll-view scroll-top设置无效
三三
06-04 6340
uniapp scroll-view scroll-top设置无效 根据需求，切换到 scroll-view 滚动区域时 滚动条回到顶部，初步尝试在切换的时候设置 this.scrollTop = 0，发现无效，一番查证： 当重复设置某些属性为相同的值时，不会同步到view层。 例如：每次将scroll-view组件的scroll-top属性值设置为0，只有第一次能顺利返回顶部。 这和props的单向数据流特性有关，组件内部scroll-top的实际值改动后，其绑定的属性并不会一同变化。 解决如下：
UNI-APP_scroll-view的scroll-top不生效问题
小歪博客
04-06 2196
<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y"></scroll-view> 先设置scrollTop等于-1，在$nextTick函数回调设置自己想要的值就可以了 this.scrollTop = -1 this.$nextTick(() => { this.scrollTop = 99999999999 }) nextTick()，是将回调函数延迟在下一次dom更新数据后调用，
uniapp scroll-view scroll-top 自动 滚动到最上面/最下面
ZGG的博客
08-24 1913
uniapp scroll-view scroll-top 微信小程序 自动滚动 页面抖动
小程序scroll-view与css左右滑动超出部分背景颜色不显示的解决方法
01-04
小程序scroll-view与css左右滑动超出部分背景颜色不显示的解决方法
el-table-infinite-scroll:El-Table无限滚动
05-26
element-ui 的表格与无限滚动的结合（el-table + infinite-scroll）。查看实例教程此指令依赖于 [email protected]，使用前请熟悉：[email protected]@2.12.0安装npm install --save el-table-infinite-...
微信小程序完美解决scroll-view高度自适应问题的方法
10-14
主要介绍了微信小程序完美解决scroll-view高度自适应问题的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
ngx-infinite-scroll：角度的无限滚动指令
01-31
= 2.3.1的Angular版本，您可以使用npm i angular2-infinite-scroll （最新版本为0.3.42）-请注意，不推荐使用angular2-infinite-scroll软件包 使用者 以及更多。 这些分析通过令人敬畏的软件包分析库提供 退出围巾 ...
uni-app中scroll-view的scroll-top不生效问题
YZ_ZZZ24的博客
06-26 1358
scrolTop数据不改变，不会触发dom更新。先置为-1，由于dom更新是异步的，所以需要用nextTick方法延迟到下次dom更新循环之后再将scrollTop置为0。 顺便提一下 vue.nextTick()方法的使用详解 理解:nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是∶当数据更新了，在dom中渲染后，自动执行该函数， ...
uniapp scroll-view 回到顶部
热门推荐
拿回忆下酒
09-18 1万+
点击tab切换时，我们希望列表从顶部开始scroll-view 提供了scroll-top属性 scroll-top设置 只是设置scroll-top时不好使的，这里需要注意@scroll 方法 //template <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scroll="scroll" > <view>滚动区域</view>
【前端】【解决问题】uniapp的scroll-view组件的scroll-top，设置回到底部失效，解决方法
tangxz的博客
07-31 5545
官方解决 我的代码： html： <scroll-view id="scrollView" scroll-y :scroll-top="scrollTop" :scroll-with-animation="true" :style="{height:style.contentH+'px'}" @scroll="scroll"> <block v-for="(item,index) in list" :key="index"> <user-chat-list :i
微信小程序scroll-view在scroll-top定位滚动条位置遇到的问题
lifengshu1234的专栏
04-02 2796
<scroll-view scroll-y="{{true}}" scroll-top='{{topNum}}' style="500rpx;"> </scroll-view> 如上代码没有一点问题， 如果在js中设置了 this.setData({ topNum:0 }); 若给topNum赋值了0，仍然不起作用。遇到的坑，就是滚动条出现的容器 是s...
在uniapp/微信小程序设置scrollTop初始值
m0_60353051的博客
11-26 2581
本文通过利用scroll-into-view属性+自定义定位器方式实现uniapp和微信小程序中对scrollTop设置初始值
【修复日常bug】scroll-view组件scroll-top属性无效
技术大咖 Rohlin的博客
09-16 1160
问题概述 这种情况我目前在uniapp开发的app或h5遇到，修改scroll-top值页面无法滚动，无法达到我们预期想要的效果。 uni-app官方文档解释 当属性值相同时，组件内部单向流数据特性有关，导致不会触发再次watch监听 解决思路 我们要滚动到顶部，而且每次点击都要触发回到顶部，可以写一个0.01的误差值 第一次滚动：0 第二次滚动：0.01 第三次滚动：0 ....一直往返循环 实现代码 HTML <scroll-view :scroll...
uniapp实现楼层导航 ，滚动定位，锚点导航
pipizhou16的博客
12-19 3096
uniapp实现楼层导航 ，滚动定位，锚点导航
uni-app中 scroll-into-view不生效
09-21
在uni-app中，scroll-into-view的生效与以下几个因素有关： 1. 是否在scroll-view组件内使用：scroll-into-view只在scroll-view组件内生效，确保scroll-into-view属性被正确放置在scroll-view标签上。 2. 子元素是否设置了id属性：scroll-into-view属性需要指定一个存在的子元素的id值，确保子元素的id属性正确设置。 3. 是否使用动态绑定：scroll-into-view属性只能通过动态绑定的方式设置，即将scroll-into-view属性的值绑定到一个data中的变量上，确保动态绑定的正确性。 4. 是否在合适的时机设置scroll-into-view属性：需要确保在页面渲染完成之后再设置scroll-into-view属性，可以考虑在onReady生命周期函数中进行设置。 如果以上因素都符合要求，但scroll-into-view仍然不生效，可以通过以下方法进行排查： 1. 检查是否存在其他样式或事件影响了scroll-into-view的生效，可以先尝试移除其他可能影响的代码，然后逐步添加代码进行测试。 2. 检查scroll-view的高度是否设置正确，确保scroll-view有足够的高度展示内容。 3. 检查使用scroll-into-view的子元素是否处于可滚动区域内，确保子元素在scroll-view范围内。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值