一个基于Vue.js的简单无缝滚动组件 vue-seamless-scroll

vue-seamless-scroll是一个基于Vue.js的具有实现上下左右方向、单步滚动、以及支持水平方向手动切换功能的简单无缝滚动组件

效果图（以向上滚动为例）：

第一步：安装相关插件

npm install vue-seamless-scroll --save

or

yarn add vue-seamless-scroll

第二步：在vue项目中引入vue-seamless-scroll

import seamless from "vue-seamless-scroll";

第三步：在components中注册组件seamless

 components: {
    seamless
    },

第四步：在template中使用seamless

<template>
  <!--组件配置 -->
    <!-- 1、data 是Array类型 必须项，无缝滚动 listData 数据。  -->
    <!-- 2、class-option Object类型 可选项，可配置相关属性-->
    <!-- 3、ScrollEnd 回调事件 一次滚动完成的回调事件-->
  <seamless :data="listData" class="seamlessScroll"  :class-option="classOption" @ScrollEnd = "scrollEnd">
    <ul class="item">
      <li v-for="(item, index) in listData" :key="index">
        <span class="section" v-text="item.section"></span>
        <span class="date" v-text="item.date"></span>
      </li>
    </ul>
  </seamless>
</template>

第五步：组件配置 可选

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

完整代码：

<template>
    <!--组件配置 -->
    <!-- 1、data 是Array类型 必须项，无缝滚动 listData 数据。  -->
    <!-- 2、class-option Object类型 可选项，可配置相关属性-->
    <!-- 3、ScrollEnd 回调事件 一次滚动完成的回调事件-->
  <seamless :data="listData" class="seamlessScroll"  :class-option="classOption" @ScrollEnd = "scrollEnd">
    <ul class="item">
      <li v-for="(item, index) in listData" :key="index">
        <span class="section" v-text="item.section"></span>
        <span class="date" v-text="item.date"></span>
      </li>
    </ul>
  </seamless>
</template>
<script>
import seamless from "vue-seamless-scroll";
export default {
  name: "vueSeamlessScroll",
  components: {
    seamless
    },
  data() {
    return {
      listData: [
        {
          section: "第1章 为人民服务",
          date: "2023-9-12",
        },
        {
          section: "第2章 钢铁般的意志",
          date: "2023-9-12",
        },
        {
          section: "第3章 老师，仪器坏了",
          date: "2023-9-12",
        },
        {
          section: "第4章 能麻烦你自尽么",
          date: "2023-9-12",
        },
        {
          section: "第5章 世界第一杀手的一生",
          date: "2023-9-12",
        },
        {
          section: "第6章 守护最好的XXX",
          date: "2023-9-12",
        },
        {
          section: "第7章 你们...不算人族",
          date: "2023-9-12",
        },
        {
          section: "第8章 何为人族",
          date: "2023-9-12",
        },
        {
          section: "第9章 你父亲...还好么？",
          date: "2023-9-12",
        },
      ],
      classOption:{
        // 数值越大速度滚动越快
        step:1,
        // 开启无缝滚动的数据量
        limitMoveNum:5,
        // 是否启用鼠标hover控制
        hoverStop:true,
        // 方向 0 往下 1 往上 2向左 3向右
        direction:1,
        // 移动端开启touch滑动
        openTouch:true,
        // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleHeight:0,
        // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        singleWidth:0,
        // 单步停止等待时间(默认值1000ms)
        waitTime:1000,
        // 左右切换按钮距离左右边界的边距(px)
        switchOffset:30,
        // 1.1.17版本前手动切换时候需要置为false
        autoPlay:true,
        // 手动单步切换step值(px)
        switchSingleStep:134,
        // 单步切换的动画时间(ms)
        switchDelay:400,
        // 不可以点击状态的switch按钮父元素的类名
        switchDisabledClass:'disabled',
        // singleHeight and singleWidth是否开启rem度量
        isSingleRemUnit:false,
        // 左右方向的滚动是否显示控制器按钮，true的时候autoPlay自动变为false
        navigation:false

      }
    };
  },
  mounted() {},
  methods: {
    scrollEnd(){
        console.log("一次滚动完成的回调事件")
    }
  },
};
</script>
<style lang="less" scoped>
.seamlessScroll {
  height: 250px;
  width: 420px;
  margin: 100px auto;
  overflow: hidden;
  ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    li{
      display: block;
      height: 30px;
      line-height: 30px;
      display: flex;
      justify-content: space-between;
      font-size: 15px;
    }
  }
}
</style>

参考文献：