Question

我有以下滚动区域，并带有click事件，我希望滚动位置重置为0。但是我不知道为什么以下代码无法正常工作。其与Quasar Documentation.中的完全相同，我也提到了导入。

<q-scroll-area id="test" style="width: 97%; height: 100%; position: absolute;">

methods: {
    handleScroll () {
      const ele = document.getElementById('test') //
      const target = getScrollTarget(ele)
      setScrollPosition(target, 0, 1000);
    },
}

Answer 1

您可以使用Vue方法.setScrollPosition

setScrollPosition（offset [，duration]）将滚动位置设置为一个偏移量。如果指定了持续时间（以毫秒为单位），则会为滚动动画。

在您的q滚动区域添加一个ref，然后在您的方法中使用它来设置要跳转到的滚动位置。在此示例中，我使列表项可单击，因此将其重置为顶部位置。

new Vue({
  el: '#q-app',
  data: function () {
    return {
      version: Quasar.version,
      count: 100
    }
  },
  methods: {
  	notify: function () {
      this.$q.notify('scroll to top')
    },
    scrollToTop: function () {
      this.notify()
      this.$refs.scrollArea.setScrollPosition(0)
    }
	},
  computed: {
    values () {
      let value = []
      for (let index = 0; index < 100; index++) {
        value.push('This is a placeholder')
      }
      return value
    }
  },
})

<div id="q-app">
  <q-scroll-area id="test" style="width: 97%; height: 100%; position: absolute;" ref="scrollArea">
    <q-list>
      <q-item v-for="(val, index) in values" @click.native="scrollToTop">
     {{index}} - {{val}}
      </q-item>
    
    <q-scroll-area>
</div>

Codepen

类星体ScrollArea重置位置

1 个答案: