vue seamless rolling

Discovery element and iview did not ask scroll seamless special effects, just a revolving door, recently you need to use the scroll seamless special effects, look for a plug-in on npm

vue-seamless-scroll

I was there with nuxt

1. Install

yarn add vue-seamless-scroll

2. Create vue-seamless-scroll.js file in the plugins

import Vue from 'vue'
import vueSeamlessScroll from 'vue-seamless-scroll'
export default () => {
  Vue.use(vueSeamlessScroll)
}

 

3. References nuxt.config.js years (Note: This needs to be ssr set to false, otherwise it will error)

  plugins: [
    '@/plugins/element-ui',
    '@/plugins/v-viewer.js',
    { src: '@/plugins/vue-seamless-scroll.js', ssr: false}
  ],

4. Specific implementation code

html：

 <vue-seamless-scroll
      :data="dataArr"
      :class-option="initOption"
      style="height: 100px; overflow: hidden;">
      <ul>
        <li
          v-for="(item,index) in dataArr"
          :key="index">
          {{ item.name }}
        </li>
      </ul>
    </vue-seamless-scroll>

js:

 computed: {
      initOption () {
        return {
          hoverStop: true, //鼠标移入时是否停止滚动
          singleHeight: 0,
          waitTime: 0,
          step: 0.2, // 滚动速度，越大越快
        }
      }
    },

More Properties venue: https://www.npmjs.com/package/vue-seamless-scroll

FIG seamless rolling effect: