我爱模板网在使用uni-app开发微信小程序时,有个页面采用了scroll-view组件,有个返回顶部的按钮,点击这个按钮需要返回顶部,于是代码如下:
html:
<scroll-view :scroll-top="scrollTop" scroll-y="true"> <!--内容区--> </scroll-view> <button @click="goTop"></button>
js:
data(){ return { scrollTop: 0 } }, methods: { goTop() { this.scrollTop = 0 } }
然而,当点击这个按钮时,并没有用,官方的解释大概是:当重复设置某些属性为相同的值时,不会同步到view层。 例如:每次将scroll-view组件的scroll-top属性值设置为0,只有第一次能顺利返回顶部。 这和props的单向数据流特性有关,组件内部scroll-top的实际值改动后,其绑定的属性并不会一同变化。
解决办法如下:
html:
<scroll-view :scroll-top="scrollTop" scroll-y="true" @scroll="scroll"> <!--内容区--> </scroll-view> <button @click="goTop"></button>
js:
export default { data() { return { scrollTop: 0, old: { scrollTop: 0 } } }, methods: { scroll: function(e) { // 记录旧值 this.old.scrollTop = e.detail.scrollTop }, goTop(e) { this.scrollTop = this.old.scrollTop this.$nextTick(function() { this.scrollTop = 0 }); } } }