45.vue-scrollto的用法,PC端滚动

vue-scrollto 官方网址为：
https://github.com/rigor789/vue-scrollto

1,安装vue-scrollto

npm install --save vue-scrollto

使用yarn则如下：

yarn add vue-scrollto

2.写个js文件 scroll-to.js

var Vue = require('vue');
var VueScrollTo = require('vue-scrollto');
 
Vue.use(VueScrollTo)
 
// You can also pass in the default options
Vue.use(VueScrollTo, {
     container: "body",
     duration: 500,
     easing: "ease",
     offset: 0,
     force: true,
     cancelable: true,
     onStart: false,
     onDone: false,
     onCancel: false,
     x: false,
     y: true
 })

3.将js文件引入到main.js中，就可以直接使用vue-scrollto标签了

4.案例

<template>
  <div id="app">
    <ul class="menu">
      <li v-scroll-to="{
                el: '#a',
                container: 'body',
                duration: 500,
                lazy: false,
                easing: 'linear',
                offset:-57,
                  }">item 1</li>
      <li v-scroll-to="{
                  el: '#b',
                  container: 'body',
                  duration: 500,
                  lazy: false,
                  easing: 'linear',
                  offset:-57,
                 }">item 2</li>
      <li v-scroll-to="{
              el: '#c',
                container: 'body',
                duration: 500,
                lazy: false,
                easing: 'linear',
                offset:-57,
                }">item 3</li>
      <li v-scroll-to="{
              el: '#element',
              container: 'body',
              duration: 500,
              lazy: false,
              easing: 'linear',
              offset:-300,