Vue第34篇，vue-seamless-scroll插件，使用详细（ vue-seamless-scroll 无缝滚动）_vue3-seamless-scroll

前言

vue-seamless-scroll是一个基于Vue.js的无缝滚动插件，支持上下左右无缝滚动、单步滚动，以及支持水平方向的手动切换功能，配置多，满足日常开发需求，基于requestAnimationFrame实现，下面给大家介绍一下，具体的使用详细

---

一. 安装相关依赖

//vue2
npm install vue-seamless-scroll --save
 
//vue3
npm install vue3-seamless-scroll --save

---

二. 全局引入组件

//vue2
  import scroll from 'vue-seamless-scroll'
  Vue.use(scroll)
 
//vue3  代码多去少补
  import { createApp } from 'vue';
  import App from './App.vue';
  import vue3SeamlessScroll from "vue3-seamless-scroll";
  const app = createApp(App);
  app.use(vue3SeamlessScroll);
  app.mount('#app');

或者使用局部引入

//组价使用三步骤1、引入 2、注册 3、使用
import vueSeamlessScroll from 'vue-seamless-scroll'      //1、引入
components: {                                            //2、注册
        vueSeamlessScroll
},　
<vue-seamless-scroll></vue-seamless-scroll>              //3、使用
 
 
//vue3 同上 代码多去少补
import { defineComponent } from "vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
export default defineComponent({
      components: {
        Vue3SeamlessScroll
      }
   })
<vue3-seamless-scroll></vue3-seamless-scroll>

---

三. 组件使用，配置相关属性

//vue2 eg:
<template>
  //这里写的行内样式，需要时自己补充
  <vue-seamless-scroll
        class="scroll_box"
        :data="dataList"
        :class-option="defineScroll"
        style="
          height: 100%;
          overflow: hidden;
          width: 100%;
          color: white;
          font-size: 18px;
          text-align: center;
        "
      >
        <ul>
          <li
            v-for="(item, index) in dataList"
            :key="index"
            style="padding: 10px 0; margin: 5px"
          >
            <span class="name">{{ item.name }}</span>
            <span class="Etiology">{{ item.Etiology }}</span>
            <span class="status">{{ item.status }}</span>
            <span class="time">{{ item.time }}</span>
          </li>
        </ul>
   </vue-seamless-scroll>
</template>
 
 
 
 
// 数据属性
data() {
    return {
      dataList: [
        {
          time: "XXXXXXXXX",
          name: "XX",
          Etiology: "XX",
          status: "XXX",
        },
        ......
      ],
    };
},
// 定义计算属性，默认执行一次（监听，类似于data概念）；
computed: {
    defineScroll() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleHeight: 0, 
        // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        singleWidth: 0, 
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
},},
 
 

---

四. 效果如下（测试数据，仅供参考）

//vue3 eg:
<vue3-seamless-scroll
    hover-stop="true"
    :list="listData"
    hover="true"
    step="0.3">
    <div
      v-for="(item, index) in listData"
      :key="index"
      class="item"
      style="padding: 10px; margin: 5px; font-size: 14px"
    >
      <span 
        v-for="(value, key, ind) in item" 
        :key="ind" 
        class="spanClass">
        {{value}}
      </span>
    </div>
</vue3-seamless-scroll>

---

五. 更多操作，请看

vue-seamless-scroll 插件在线演示文档https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-others

感觉有用，就一键三连，感谢(●'◡'●)