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

最新推荐文章于 2024-08-22 11:53:20 发布
最新推荐文章于 2024-08-22 11:53:20 发布
阅读量7.3k 收藏 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,生效了.问题解决.
在这里插入图片描述

你头发乱了喔_
关注
专栏目录
scroll-view 中scroll-top设置无效对问题
qq_44986635的博客
03-26 4724
初次使用scroll-view 中scroll-top，结果发现没有效果，所以在网上搜了一下，发现有问题的人还挺多的，所以就在此说明一下 <scroll-view class="left-navbar" scroll-y="true"> <view wx:for="{{list}}" class="{{ currentTab == in...
uniapp scroll-view 设置scrollTop无效
peachban的博客
11-03 2568
在实际运用过程中，发现设置了scroll-top无效，滚动条位置并没有发生变化，是因为微信小程序的官方框架处于性能考虑，初始化设置scroll-top不会重新渲染页面，需要将scroll-top的是放在一个事件内执行才可以生效。这里也有一个坑，如果事件执行时，scrollTop的值和原来一样，他是不会生效的(就算页面滚动了，但是scrollTop是不变的)，所以在触发回到顶部事件，重新赋值的时候，可以加一个0.0001，页面就会回到顶部了。这里有一个坑，初始值设置（注意：不要设置成0，不然无效）
【修复日常bug】scroll-view组件scroll-top属性无效
技术大咖 Rohlin的博客
09-16 1269
问题概述 这种情况我目前在uniapp开发的app或h5遇到，修改scroll-top值页面无法滚动，无法达到我们预期想要的效果。 uni-app官方文档解释 当属性值相同时，组件内部单向流数据特性有关，导致不会触发再次watch监听 解决思路 我们要滚动到顶部，而且每次点击都要触发回到顶部，可以写一个0.01的误差值 第一次滚动：0 第二次滚动：0.01 第三次滚动：0 ....一直往返循环 实现代码 HTML <scroll-view :scroll...
uniapp实现区域滚动、下拉刷新、上滑滚动加载更多
最新发布
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
08-22 5599
scroll-view自定义滚动区域，通过css样式，让滚动区域自适应整个屏幕剩余空间。min-height:0;设置为0
踩坑记录：uniapp中scroll-view的scroll-top不生效问题；
qq_44776454的博客
12-05 3987
踩坑记录：uniapp中scroll-view的scroll-top不生效问题 的详细解决思路
uniapp中scroll-view的scroll-top不生效问题
qq_45632659的博客
07-11 4067
uniapp中scroll-view的scroll-top不生效问题
uniapp scroll-view scroll-top设置无效
三三
06-04 6861
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 2263
<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 2642
uniapp scroll-view scroll-top 微信小程序 自动滚动 页面抖动
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. 子元素是否...
微信小程序或uni-app scrollView 之scroll-into-view无法跳转的一个坑
qq_41630387的博客
11-20 7889
微信小程序 scrollView 之scroll-into-view无法跳转的一个坑 反复测试发现就是scroll-view的高或宽要给个固定值。 &lt;scroll-view class="page-body" scroll-y :scroll-into-view="scrollIntoView" :style="'height:'+scrollHeight+'px'"&gt; let sy...
微信小程序-uniapp使用＜scroll-view ＞组件实现卡片左滑功能在电脑端小程序版不生效问题
m0_69924991的博客
06-02 464
改用swiper组件就可以啦~附上参考代码。
uni-app用了scroll-view后的下拉刷新问题以及跳转到tabbar的方法
stormzi的博客
07-30 4309
1.用了scroll-view后的下拉刷新问题 如果swiper嵌套scroll-view纵向滚动条需要用到下拉刷新功能，在用户下拉时，其实是触发的scroll-view纵向滚动条中的下拉事件，无法触发到页面级的下拉事件。 此时，如果通过onPullDownRefresh页面级的下拉事件，是没有效果的。如果不采用scroll-view，则页面级的上拉加载只能触发一次，所以不采用这种方法。 而采用scroll-view 组件中的组件下拉刷新功能： refresh() {
【爬坑】uniapp中scroll-view自适应高度
Eder的博客
07-25 1201
看了好多博客上处理uniapp的scroll-view自适应高度很多教程都是不能完全解决的，有的教程h5正常，app端就不正常了，我也是从教程简单的修改而达到h5和app都正常的，下面放代码 onReady() { //这里不要用onLoad，要不然提示错误 uni.getSystemInfo({ success: (res) => { let query=uni.createSelectorQuery().select(".roll"); //想要获取高度的元素名（class
【uniapp】基于scroll-view 实现发布评论后滚动到最顶部
m0_61775140的博客
09-06 1772
scroll： 滚动时触发，可以获取滚动条高度， event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}：这是一个uniapp的项目里的小功能，在此记录一下，当用户滚动页面最底部，接着在此输入留言并点击发送按钮后，滚动条要滚动到页面最顶部！至此，评论完成后滚动到页面最顶部，这个功能就算圆满完成啦！scrollTop: 0, // 记录滚动条位置，距离顶部为0。下面是要实现的效果展示图！
uni-app, 实现 scroll-view 自动滚动到底部，并控制触发频率
weixin_45559449的博客
09-22 5258
在频繁触发场景下，为了降低执行频率，可以增加节流函数 throttle，让 chatScrollTop 方法在规定时间内只执行一次，如果不需要可以忽略。当 scroll-view 内容改变时，调用 chatScrollTop 方法，就可以实现 scroll-view 内容区域自动滚动到底部效果。通过类名获取 scroll-view、和 scroll-view内容容器，得到两个元素的高度，动态设置 scrollTop 值。想要实现 scroll-view 滚动到底部，只需要让。
uni-app中scroll-view的scroll-top不生效问题
YZ_ZZZ24的博客
06-26 1435
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 5806
官方解决 我的代码： 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
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值