![](https://www.dazhuanlan.com/webchat.jpg)
基于Vue,可横滑的无缝轮播图;
引入使用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
|
<template> <div class="loop-wrap"> <loop-img :imgs="imgs" :duration="0.5" :swipeable="true" :gap-time="4"/> </div> </template> <script> import loopImg from '../../appassets/components/LoopImg'; export default { data() { return { imgs: [ { imgSrc: '/src/assets/img/bg1/bg1.jpg', link: 'https://tall-ui.github.io' }, '/src/assets/img/bg1/bg2.jpg', '/src/assets/img/bg1/bg3.jpg', '/src/assets/img/bg1/bg4.jpg', ] }; }, component: { loopImg } }; </script>
|
例子
通过属性imgs
向组件传递一个存放图片地址的数组,如果点击图片可以跳转的,每一项为一个对象,包含两个属性,imgSrc
和link
,分别存放图片地址,和跳转链接;
![loop](https://tall-ui.github.io//static/image/loopimg/loop.png)
API
参数 |
说明 |
类型 |
可选值 |
默认值 |
imgs |
图片地址集合 |
Array |
[‘/bg1/bg2.jpg’] |
[] |
imgs[i] |
图片地址或图片信息相关 |
String/Object |
- |
- |
imgs[i].imgSrc |
图片地址 |
String |
- |
- |
imgs[i].link |
跳转落地链接 |
String |
- |
- |
duration |
动画过渡时间 单位 s |
Number |
- |
0.5 |
gapTime |
轮播图间隔时间 单位 s |
Number |
- |
4 |
swipeable |
是否可滑动 |
Boolean |
true,false |
true |
事件
事件 |
描述 |
参数 |
change |
图片切换时触发 |
index(当前图片的索引) |
近期评论