vue-seamless-scroll 列表自动滚动

1.下载

cnpm i --s vue-seamless-scroll

2.在main.js文件里引用

import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

3.

<template>
  <div>
    <vue-seamless-scroll
      :data="tenList"
      class="seamless-warp"
      :class-option="classOption"
    >
      <ul class="tenCenter">
        <li v-for="(item, index) in tenList" :key="index">
          <p>{{ item.title }}</p>
          <line-chart :lineChartData="item.value"></line-chart>
        </li>
      </ul>
    </vue-seamless-scroll>
  </div>
</template>
<script>
import LineChart from "./lineChart.vue";
export default {
  components: { LineChart },
  data() {
    return {
      tenList: [
        {
          title:
            "落实我省“”行动方案，研究制定细化举措",
          value: 20,
        },
        {
          title: "深化施",
          value: 30,
        },
        {
          title: "做好北式调整，确保平稳过渡",
          value: 10,
        },
        {
          title:
            "工程建设投运计划",
          value: 50,
        },
        {
          title:
            "联网试点示范建设",
          value: 80,
        },
        {
          title: "第二次落实省“碳达峰",
          value: 20,
        },
        {
          title: "深峰”特性研究，完善交直流混联控制措施",
          value: 30,
        },
        {
          title: "做好运行方式调整，确保平稳过渡",
          value: 10,
        },
        {
          title:
            "全年输工程建设投运计划",
          value: 50,
        },
        {
          title:
            "对接建设要求，积极参与全省互联网试点示范建设",
          value: 80,
        },
      ],
    };
  },
  computed: {
    classOption() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        // limitMoveNum: 10, // 开始无缝滚动的数据量 this.dataList.length
        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)
      };
    },
  },
  mounted() {},
  methods: {},
};
</script>
<style lang="scss">
.seamless-warp {
  height: 264px;
  overflow: hidden;
}
.tenCenter {
  padding: 10px 25px;
  list-style: disc;
}
</style>

配置项

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    是否自动播放使用switch切换时候需要置为false    true    Boolean
switchSingleStep    手动单步切换step值(px)    134    Number
switchDelay    单步切换的动画时间(ms)    400    Number
switchDisabledClass    不可以点击状态的switch按钮父元素的类名    disabled    String
isSingleRemUnit    singleHeight and singleWidth是否开启rem度量    false    Boolean