Marquee 滚动

fox-marquee 图片滚动组件

HTML

基本使用

<fox-marquee class="my-advert-img-area" :options="m_options" :items="m_firstPageInfo"
                             @item_select="select($event)" @image_click="showDetail($event)"></fox-marquee>

API

Props

组件支持以下属性

参数	说明	类型	默认值
options	参数（必传）	Object	—
items	图片数组（必传）	Array	—

// 跑马灯参数

m_options: {

​ shortcutWidth: '7.5rem', // 小图片宽度

​ shortcutHeight: '4.35rem', // 小图片高度

​ margin: '0.1rem', // 小图片外边距

​ switchDuration: 1000, // 图片切换间隔

},

m_firstPageInfo: [

​ {

​ icon: 'static/img/pad/media/bigpic_1.png',

​ shortcut: 'static/img/pad/media/smallpic_1.png',

​ },

​ {

​ icon: 'static/img/pad/media/bigpic_2.png',

​ shortcut: 'static/img/pad/media/smallpic_2.png',

​ },

​ {

​ icon: 'static/img/pad/media/bigpic_3.png',

​ shortcut: 'static/img/pad/media/smallpic_3.png',

​ },

​ {

​ icon: 'static/img/pad/media/bigpic_4.png',

​ shortcut: 'static/img/pad/media/smallpic_4.png',

​ },

​ {

​ icon: 'static/img/pad/media/bigpic_5.png',

​ shortcut: 'static/img/pad/media/smallpic_5.png',

​ },

],

Event

支持以下事件:

事件	说明
image_click	点击大图时触发的事件
item_select	小图滚动或者点击小图时触发的事件