vue-seamless-scroll插件，使用详细（ vue-seamless-scroll 无缝滚动）

淡淡的烟草味﹌ 2023-10-04 23:03 9阅读 0赞

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

**1、安装相关依赖**

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

**2、全局引入组件；**

//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>

**3、组件使用，配置相关属性；**

//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
            singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
            singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
            waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
          };
        },
      },

**效果如下（测试数据，仅供参考）：**

![7456153c480846d1b004f967d3bbd5f7.gif][]

//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 插件在线演示文档![icon-default.png_t_N176][]https://chenxuan1993.gitee.io/component-document/index\_prod\#/component/seamless-others][vue-seamless-scroll _icon-default.png_t_N176_https_chenxuan1993.gitee.io_component-document_index_prod_component_seamless-others]

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

[7456153c480846d1b004f967d3bbd5f7.gif]: https://img-blog.csdnimg.cn/7456153c480846d1b004f967d3bbd5f7.gif
[icon-default.png_t_N176]: https://csdnimg.cn/release/blog_editor_html/release2.2.3/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=N176
[vue-seamless-scroll _icon-default.png_t_N176_https_chenxuan1993.gitee.io_component-document_index_prod_component_seamless-others]: https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-others