程序滚动

程序滚动

您可以使用 $vuetify 对象上的 goTo 方法以编程方式触发应用程序中的滚动。此方法支持几种不同类型的目标选择器和选项，包括使用内置缓动功能的平滑滚动。

用例

goTo 方法需要两个参数 target 和 options。target 可以是相对于页面顶部偏移，也可以是一个有效的 css 选择器，也可以是元素引用。 options 是一个包含 duration, easing ,container, 和 offset 在内的对象。

template script

<template>
  <v-container>
    <v-row>
      <v-col cols="12">
        <h3
          ref="radio"
          class="headline"
        >
          Target
        </h3>
        <v-radio-group
          v-model="type"
          row
        >
          <v-radio
            label="Number"
            value="number"
          ></v-radio>
          <v-radio
            label="Selector"
            value="selector"
          ></v-radio>
          <v-radio
            label="DOMElement"
            value="element"
          ></v-radio>
        </v-radio-group>
        <v-text-field
          v-if="type === 'number'"
          v-model="number"
          type="number"
          label="Number"
        ></v-text-field>
        <v-select
          v-if="type === 'selector'"
          v-model="selector"
          label="Selector"
          :items="selections"
        ></v-select>
        <v-select
          v-if="type === 'element'"
          v-model="selected"
          :items="elements"
          label="DOMElement"
        ></v-select>
      </v-col>
      <v-col cols="12">
        <h3 class="headline">Options</h3>
        <v-select
          v-model="easing"
          :items="easings"
          label="Easing"
        ></v-select>
        <v-slider
          v-model="duration"
          min="0"
          max="1000"
          label="Duration"
          thumb-label
        ></v-slider>
        <v-slider
          v-model="offset"
          min="-500"
          max="500"
          label="Offset"
          thumb-label
        ></v-slider>
      </v-col>
      <v-col>
        <v-btn
          ref="button"
          block
          color="primary"
          @click="$vuetify.goTo(target, options)"
        >
          scroll
        </v-btn>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
  import * as easings from 'vuetify/es5/services/goto/easing-patterns'
  export default {
    data () {
      return {
        type: 'number',
        number: 9999,
        selector: '#first',
        selections: ['#first', '#second', '#third'],
        selected: 'Button',
        elements: ['Button', 'Radio group'],
        duration: 300,
        offset: 0,
        easing: 'easeInOutCubic',
        easings: Object.keys(easings),
      }
    },
    computed: {
      target () {
        const value = this[this.type]
        if (!isNaN(value)) return Number(value)
        else return value
      },
      options () {
        return {
          duration: this.duration,
          offset: this.offset,
          easing: this.easing,
        }
      },
      element () {
        if (this.selected === 'Button') return this.$refs.button
        else if (this.selected === 'Radio group') return this.$refs.radio
      },
    },
  }
</script>

API

从下面选择您想要的组件，并查看可用的属性、插槽、事件和函数。

和路由一起使用

goTo 函数可以单独导入并在任何地方被调用。当绑定到 vue-router 时，这尤其有用。

// src/router.js
import Router from 'vue-router'
import goTo from 'vuetify/es5/services/goto'
export default new Router({
  scrollBehavior: (to, from, savedPosition) => {
    let scrollTo = 0
    if (to.hash) {
      scrollTo = to.hash
    } else if (savedPosition) {
      scrollTo = savedPosition.y
    }
    return goTo(scrollTo)
  },
  routes: [
    //
  ],
})

First

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Programmatic scrolling（程序滚动）

程序滚动

用例

API

和路由一起使用

First

Second

Third