首页 > 建站教程 > 前端框架 >  uni-app scroll-view scroll-top设置无效正文

uni-app scroll-view scroll-top设置无效

我爱模板网在使用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
      });
    }
  }
}