在使用uniapp的scroll-top组件时,滚动到底部切换其他类型时,设置scroll-top为0,发现只有第一次切换能够成功回到顶部, 之后每次切换设置的scroll-top 没有效果。
官方说法是:
当重复设置某些属性为相同的值时,不会同步到view层。 例如:每次将scroll-view组件的scroll-top属性值设置为0,只有第一次能顺利返回顶部。 这和props的单向数据流特性有关,组件内部scroll-top的实际值改动后,其绑定的属性并不会一同变化。
对此,官方也给出了解决方案:
监听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
},
// 先把滚动位置赋值给scroll-top,再把scroll-top的值设置为0
goTop: function(e) {
this.scrollTop = this.old.scrollTop
this.$nextTick(function() {
this.scrollTop = 0
});
}
}
}
官方还提供了另一种方法,但是还需要自己特别处理,因此不做推荐,感兴趣的可以看下官网说法