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

前言

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

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

正文

先上效果图

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

使用步骤

安装

npm install --save vue-scroll-ad

使用

main.js中

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

html中

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

配置

props	describe	type	default
dataList	数据	Array	[]
inhoverColor	显示的颜色	String	#b4a078
hoverColor	鼠标悬浮时的颜色	String	#fff
height	高度	String	10px
hasLine	是否有下划线	Boolean	false
hasBorder	横向多数据是否有分割线	Boolean	false
speed	速度	Number	5000
valueList	横线显示的子数据参数名	String	list
valueContent	显示的内容的参数名	String	content
valueLink	跳转的链接的参数名	String	link

使用示例

单列有下划线

<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地址(https://github.com/SaltedFishHPP/vue-scroll-ad).