vue 无缝滚动-vue-seamless-scroll

安装依赖

npm install vue-seamless-scroll --save

安装完成之后进行组件引用

import vueSeamlessScroll from 'vue-seamless-scroll'

components: {
  vueSeamlessScroll
}

参数配置

key	description	default	type
`step`	数值越大速度滚动越快	`1`	`Number`
`limitMoveNum`	开启无缝滚动的数据量	`5`	`Number`
`hoverStop`	是否启用鼠标hover控制	`true`	`Boolean`
`direction`	方向 0 往下 1 往上 2向左 3向右	`1`	`Number`
`openTouch`	移动端开启touch滑动	`true`	`Boolean`
`singleHeight`	单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1	`0`	`Number`
`singleWidth`	单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3	`0`	`Number`
`waitTime`	单步停止等待时间(默认值1000ms)	`1000`	`Number`
`switchOffset`	左右切换按钮距离左右边界的边距(px)	`30`	`Number`
`autoPlay`	1.1.17版本前手动切换时候需要置为false	`true`	`Boolean`
`switchSingleStep`	手动单步切换step值(px)	`134`	`Number`
`switchDelay`	单步切换的动画时间(ms)	`400`	`Number`
`switchDisabledClass`	不可以点击状态的switch按钮父元素的类名	`disabled`	`String`
`isSingleRemUnit`	singleHeight and singleWidth是否开启rem度量	`false`	`Boolean`
`navigation`	左右方向的滚动是否显示控制器按钮，true的时候autoPlay自动变为false	`false`	`Boolean`

data() {
  return {
    classOption: {
      step: 0.5, // 数值越大速度滚动越快
      limitMoveNum: 2, // 开始无缝滚动的数据量
      hoverStop: true, // 是否开启鼠标悬停stop
      direction: 1, // 0向下 1向上 2向左 3向右
      openWatch: true, // 开启数据实时监控刷新dom
      singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
      singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
      waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
    }
  }
}

实例

<template>
  <vue-seamless-scroll
    class="overflow-hidden scroll-list"
    :data="list"
    :class-option="classOption"
  >
    <div class="d-flex">
      <div
        v-for="(item, index) in list"
        :key="index"
        class="main-top-item d-flex justify-content-between"
      >
        <div class="main-top-name d-flex justify-content-between flex-column">
          <p class="iconfont-bg"><i class="iconfont" v-html="'&#xe704;'" /></p>
          <p class="main-top-label">{
   
   { item.monitoType }}</p>
        </div>
        <div class="main-top-cont d-flex justify-content-between flex-column p-2 ml-3">
          <div class="main-top-box d-flex justify-content-between">
            <span class="mr-2">本月累计</span>
            <span class="text-orange">{
   
   { item.thisValue }}</span>
          </div>
          <div class="main-top-box d-flex justify-content-between">
            <span class="mr-2">上月累计</span>
            <span class="text-blue">{
   
   { item.lastValue }}</span>
          </div>
        </div>
      </div>
    </div>
  </vue-seamless-scroll>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  components: {
    vueSeamlessScroll
  },
  data() {
    return {
      list: [],
      classOption: {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 5, // 开始无缝滚动的数据量
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 2, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.overflow-hidden{
  overflow: hidden;
}
.scroll-list {
  width: 2947px;
  height: 108px;
}
</style>

vue 无缝滚动-vue-seamless-scroll

猜你喜欢