vue3使用vue3-seamless-scroll插件

最新推荐文章于 2025-06-10 15:37:44 发布

玛卡巴卡半夜不睡觉

最新推荐文章于 2025-06-10 15:37:44 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_70547044/article/details/132107203

本文介绍了如何在Vue项目中引入并使用vue-seamless-scroll组件，包括组件的注册、在列表中的应用以及step参数对滚动速度的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、局部引入

import vueSeamlessScroll from "vue-seamless-scroll";

2、注册

components: {
vueSeamlessScroll,
},

3、使用

<vue3-seamless-scroll :list="list1" class="scroll" step="0.2">
        <div class="item" v-for="(item1, i1) in list1" :key="i1">
          <div class="item11">
            <div class="num">{{ item1.num }}</div>
            <div class="title">{{ item1.title }}</div>
            <div class="lineWidth">
              <div
                :style="{ width: item1.number / 100 + '%' }"
                style="background-color: #87f7c7; height: 100%"
              ></div>
            </div>
            <div class="number">{{ item1.number }}</div>
          </div>
        </div>
      </vue3-seamless-scroll>

step参数是用来调整滚动速度的，数值越小，滚动速度越小