vue-seamless-scroll无缝滚动插件 - 使用源码（简介及使用教程）

vue-seamless-scroll是一个基于Vue.js的简单无缝滚动组件, 基于requestAnimationFrame实现,配置多满足多样需求。目前支持上下左右无缝滚动，单步滚动，以及支持水平方向的手动切换功能

安装

Npm

npm install vue-seamless-scroll --save

Yarn

yarn add vue-seamless-scroll

浏览器CDN

https://cdn.jsdelivr.net/npm/vue-seamless-scroll@latest/dist/vue-seamless-scroll.min.js

使用

全局注册

import Vue from 'vue'
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)
//或者
//Vue.use(scroll,{componentName: 'scroll-seamless'})

局部注册

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

简单使用

 <div id="app">
    <vue-seamless-scroll></vue-seamless-scroll>
  </div>

配置项

回调事件

使用源码

<!--
 * @Author: Songjq
 * @Date: 2022-02-18 10:26:29
 * @Desscription:
-->
<template>
  <div
    class="d-flex jc-between"
    id="bottomSlide"
  >
    <vue-seamless-scroll
      :data="listData"
      :class-option="defaultOption"
      id="scoll"
    >
      <ul class="d-flex">
        <li
          v-for="(item, index) in listData"
          :key='index'
        >
          {{item.title}}
        </li>
        <!-- <li>华南区域：空店店铺12、撤店店铺14、临时店铺20</li>
        <li>华南区域：空店店铺12、调店店铺12</li>
        <li>华南区域：空店店铺12、撤店店铺14、临时店铺20、调店店铺12</li> -->
      </ul>
    </vue-seamless-scroll>
  </div>
</template>
<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
// 例如：import uploadFile from '@/components/uploadFile/uploadFile'
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    vueSeamlessScroll,
  },
  data() {
    // 这里存放数据
    return {
      listData: [],
    };
  },
  // 监听属性 类似于data概念
  computed: {
    defaultOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        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)
        openTouch: true, // 开启拖动
      };
    },
  },
  // 方法集合
  methods: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    for (let i = 0; i < 5; i++) {
      let j = {
        title: "华南区域：空店店铺12、撤店店铺14、临时店铺20" + i,
      };
      this.listData.push(j);
    }
  },
};
</script>
<style lang="scss" scoped>
$box-height: 530px;
$box-width: 100%;
#bottomSlide {
  width: 100%;
  height: 40px;
  overflow: hidden;
  ul {
    width: 100%;
    li {
      height: 36px;
      background: linear-gradient(90deg, #0c4c99 0%, #0b0f39 100%);
      border-radius: 36px 0px 20px 0px;
      opacity: 0.79;
      line-height: 36px;
      padding: 0 28px;
      font-size: 14px;
    }
  }
}
</style>