vue实现循环滚动列表

最新推荐文章于 2024-05-24 17:09:11 发布

小小小菜鸟1997

最新推荐文章于 2024-05-24 17:09:11 发布

阅读量2.5k

点赞数 2

文章标签： html css

本文链接：https://blog.csdn.net/HuLuWa1997/article/details/120331797

版权

本文介绍了如何在Vue中实现循环滚动列表的功能。通过设置父容器高度、利用Array数据及overflow:hidden属性，以及对ul容器的初始化宽度进行CSS样式设置，可以创建一个左右滚动的效果。文章还提及了组件的安装步骤和在main.js中的全局注册方法。

摘要由CSDN通过智能技术生成

注意：需要给父容器一个height和:data='Array’和overfolw:hidden;左右滚动需要给ul容器一个初始化 css width。
先来介绍该组件的用法：
1.安装命令：

cnpm install vue-seamless-scroll --save

2.main.js文件中作为全局组件引入

import scroll from 'vue-seamless-scroll'

Vue.use(scroll)

在这里插入图片描述

<vue-seamless-scroll :data="listData" class="seamless-warp" :class-option="defaultOption">
        <ul class="item">
            <li v-for

关注