npm组件 vue-scroll-ad 广告滚动

前言

闲着没事，做了一个商场项目，然后发现商城项目中，有很多地方都要用到广告滚动的效果，就想着写个组件，这样以后也不用总是重复写一遍（复制一遍）。

第一次写组件，参考了好多文档，然后找到了一个大佬写的，非常详细，收了，打算写组件的可以看看：blog.csdn.net/qq_40513881…

正文

先上效果图

基本一个项目里有单列的广告就可以满足了，但是我参考的网站上有个多列的滚动，也顺便做了一个，但是对于悬浮变色效果还有待改进。

使用步骤

安装

npm install --save vue-scroll-ad

使用

main.js中

import scrollAd from 'vue-scroll-ad'
Vue.use(scrollAd)

html中

<scroll-ad :dataList = "adList"></scroll-ad>

配置

使用示例

单列有下划线

<scroll-show class="ad"
	:dataList="adList"
	hover-color="#b4a078"
	inhover-color="#000"
	:hasLine="true"
></scroll-show>

adList: [
   { content: "广告内容1", link: "xxx.com" },
   { content: "广告内容2", link: "xxx.com" },
   { content: "广告内容3", link: "xxx.com" },
   { content: "广告内容4", link: "xxx.com" },
   { content: "广告内容5", link: "xxx.com" },
   { content: "广告内容6", link: "xxx.com" }
],

list的格式如果是: [{ content: "xxx", link: "xxx.com" }],则不需要传valueContent和valueLink，否则需要制定内容和链接的自定义参数名

多列无下划线

<scroll-show class="ad"
 	:dataList="adList2"
 	:speed="3000"
 	hover-color="#b4a078"
 	inhover-color="#969696"
 	value-list="subList"
 	value-content="adContent"
 	value-link="adLink"
></scroll-show>
 
adList2: [
    {
        subList: [
            { adContent: "第1条广告的第1条内容", adLink: "xxx.com" },
            { adContent: "第1条广告的第2条内容", adLink: "xxx.com" },
            { adContent: "第1条广告的第3条内容", adLink: "xxx.com" },
            { adContent: "第1条广告的第4条内容", adLink: "xxx.com" }
        ]
    },
    {
        subList: [
            { adContent: "第2条广告的第1条内容", adLink: "xxx.com" },
            { adContent: "第2条广告的第2条内容", adLink: "xxx.com" },
            { adContent: "第2条广告的第3条内容", adLink: "xxx.com" },
            { adContent: "第2条广告的第4条内容", adLink: "xxxx.com" }
        ]
    },
    {
        subList: [
            { adContent: "第3条广告的第1条内容", adLink: "xxx.com" },
            { adContent: "第3条广告的第2条内容", adLink: "xxx.com" },
            { adContent: "第3条广告的第3条内容", adLink: "xxx.com" },
            { adContent: "第3条广告的第4条内容", adLink: "xxx.com" }
        ]
    }
],

多列展示需要list数据中还有subList数据，默认的sub参数名为list，如果不一致，则需要传value-list=""进行自定义命名

GitHub地址(github.com/SaltedFishH…).