组件属性设置不生效解决办法:
每次将scroll-view组件的scroll-top属性值设置为0,只有第一次能顺利返回顶部。 这和props的单向数据流特性有关,组件内部scroll-top的实际值改动后,其绑定的属性并不会一同变化。
场景:
左侧商品栏,右侧商品列表,每次点击商品栏右侧商品列表滚动到顶部。
但是设置了scrollTop为0只有第一次生效了,当滚动列表,第二次点击商品栏时会发现列表并没有滚动到顶部。
解决方法:
1.监听scroll事件,记录组件内部变化的值,在设置新值之前先设置为记录的当前值
<scroll-view scroll-y="true" :scroll-top="scrollTop" @scroll="scroll"></scroll-view>
export default {
data() {
return {
scrollTop: 0,
old: {
scrollTop: 0
}
}
},
methods: {
scroll: function(e) {
this.old.scrollTop = e.detail.scrollTop
},
goTop: function(e) {
this.scrollTop = this.old.scrollTop
this.$nextTick(function() {
this.scrollTop = 0
});
}
}
}
2.监听scroll事件,获取组件内部变化的值,实时更新其绑定值
<scroll-view scroll-y="true" :scroll-top="scrollTop" @scroll="scroll"></scroll-view>
export default {
data() {
return {
scrollTop: 0,
}
},
methods: {
scroll: function(e) {
// 如果使用此方法,请自行增加防抖处理
this.scrollTop = e.detail.scrollTop
},
goTop: function(e) {
this.scrollTop = 0
}
}
}
第二种解决方式在某些组件可能造成抖动,推荐第一种解决方式。
原文链接:https://uniapp.dcloud.net.cn/tutorial/vue-api.html#componentsolutions
bug2:
想要右侧商品列表实现锚点的效果,最开始的时候将scroll-view放在view块中动态绑定了scroll-top的值,发现值变化了,但是页面没有滚动,猜测:是外面的块把scroll-view滚动给封住了。
解决方法:将scroll-view放在最外层就好了。
头疼的一天~~~~~
文章评论