基于Vue的简单无缝滚动组件 支持上下左右无缝滚动,单步滚动,以及水平方向的手动切换
演示文档:https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default

安装依赖:

npm install vue-seamless-scroll --save


全局注册:

import Vue from 'vue'
import scroll from 'vue-seamless-scroll'

export default () => {
  Vue.use(scroll)
}

局部注册:

import vueSeamless from 'vue-seamless-scroll'
export default {
  components: {
    vueSeamless
  }
}

使用:

<vue-seamless-scroll :data="list" :class-option="classOption">
    <ul class="scroll-item">
      <li v-for="(item, index) in list" :key="index">
        ......
      </li>
    </ul>
</vue-seamless-scroll>

computed: {
  classOption () {
    return {
      step: 2, // 数值越大速度滚动越快
      limitMoveNum: 3, // 开启无缝滚动的数据量 设置(数值<=页面展示数据条数不滚)(超过页面展示条数滚动)
      openWatch: true, // 开启数据实时监控刷新dom
      singleHeight: 40,
      waitTime: 2500 // 单行停顿时间(singleHeight,waitTime)
    }
  }
}

Logo

前往低代码交流专区

更多推荐