1

我有以下滚动和单击事件，我希望滚动位置重置为 0。但是我不知道为什么下面的代码不起作用。它与Quasar 文档中的完全相同。我也有提到的进口。

<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);
    },
}
4

1 回答 1

1

你可以使用Vue方法.setScrollPosition

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

将 a 添加ref到您的 q-scroll-area 中，然后在您的方法中，使用它设置要跳转到的滚动位置。对于这个例子，我使列表项可点击，因此将重置到顶部位置。

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>

密码笔

于 2019-01-10T17:16:29.983 回答