zhangdaren
zhangdaren
  • 发布:2019-11-27 20:15
  • 更新:2024-11-13 16:06
  • 阅读:3860

scroll-view组件返回顶部不生效!(附第三方解决方案)

分类:uni-app

从https://uniapp.dcloud.io/component/scroll-view可以看到gotoTop()的实现,如下

 goTop: function(e) {  
            this.scrollTop = this.old.scrollTop  
            this.$nextTick(function() {   //这里应该是箭头函数  
                this.scrollTop = 0  
            });  
            uni.showToast({  
                icon:"none",  
                title:"纵向滚动 scrollTop 值已被修改为 0"  
            })  
 }

此前没太注意看这里。
今天遇到没法返回顶部的问题,经调试,滚动时,scrollTop一直都为0,而且再改为0,相当于没变化,也就是说界面其实没刷新。
后面改为100时,发现到100的位置,但当再次返回顶部,又不行了,猜测是因为数值没有变化,后来改为:

 goTop: function(e) {  
          this.scrollTop = Math.random();  
 }  

这样就好使了。

当然,还是建议用官方的方案,此文就当作是一种探讨吧~

1 关注 分享
5***@qq.com

要回复文章请先登录注册

w***@outlook.com

w***@outlook.com

正确总结:
• props 是父组件传递给子组件的,子组件只能读取,而不能直接修改它。
• 如果子组件内部修改 props 的值,watch 无法监听到这些变化,因为 watch 只能监听父组件传递的 props 的变化。
• watch 只能监听父组件对 props 的修改,而不能监听子组件内部的修改。
• 这些刷新和回到顶部都是单项绑定的,
• 比如回到顶部,初始值是0,组件内部滚动改了props的值,但是是子组件改的props的值,watch认为还是0,所以在父组件再重置为0时,watch监听不到,所以回不到顶部
刷新同样如此,必须在下拉刷新时修改刷新的值为true,不然不是父组件更改的v-bind的值,下拉刷新组件(子组件)本身修改props,watch监听不到,认为还是false,导致父组件设置v-bind为false,watch也认为是false,导致watch不触发,但是其实下拉刷新为true,watch又不改所以导致刷新加载一直持续javascript:;
2024-11-13 16:06