vue-ui-swipe
基于vue2.0的图片轮播图指令，移动端用的，稍微兼容pc
文档：https://cgygd.github.io/vue-ui-swipe/
demo：https://cgygd.github.io/vue-ui-swipe/example/index.html
Install
npm install vue-ui-swipe --save Usage
import swipeDirective from 'vue-ui-swipe' import 'vue-ui-swipe/lib/ui-swiper.css' export default { data () { return { list: [], swipeInit: { delay: 3500, autoPlay: false } } }, directives: { swipe: swipeDirective }, mounted: function () { let listData = [ { img: 'http://opkvnn2sq.bkt.clouddn.com//test/b4ece1c7748bf985bc01ae44acd1cd6b.jpg', smallImg: 'http://opkvnn2sq.bkt.clouddn.com//test/b4ece1c7748bf985bc01ae44acd1cd6b.jpg?imageView2/2/w/60' }, { img: 'http://opkvnn2sq.bkt.clouddn.com//test/3e75d8ffc3c28393f61eea25ed986888.png', smallImg: 'http://opkvnn2sq.bkt.clouddn.com//test/3e75d8ffc3c28393f61eea25ed986888.png?imageView2/2/w/60' }, { img: 'http://opkvnn2sq.bkt.clouddn.com//test/9156b0f365ac42c3236be7915b8a6428.png', smallImg: 'http://opkvnn2sq.bkt.clouddn.com//test/9156b0f365ac42c3236be7915b8a6428.png?imageView2/2/w/60' }, { img: 'http://opkvnn2sq.bkt.clouddn.com//test/1f337fd118f9f27ec869a2b3581fe2ae.jpg', smallImg: 'http://opkvnn2sq.bkt.clouddn.com//test/1f337fd118f9f27ec869a2b3581fe2ae.jpg?imageView2/2/w/60' }, { img: 'http://opkvnn2sq.bkt.clouddn.com//test/ed25b2550ba66eda2059d5e939ae8a2c.jpg', smallImg: 'http://opkvnn2sq.bkt.clouddn.com//test/ed25b2550ba66eda2059d5e939ae8a2c.jpg?imageView2/2/w/60' } ] setTimeout(() => { this.$set(this, 'list', listData) }, 10) } }<p class="demo-title">自动播放</p> <div class="ui-swiper-demo"> <div v-swipe class="ui-swiper-container"> <div class="ui-swiper"> <div class="ui-swiper-box" v-for="item in list"> <img class="ui-swiper-filter" :src="item.smallImg" :data-src="item.img" alt=""> </div> </div> </div> </div> <hr /> <p class="demo-title">不自动播放</p> <div class="ui-swiper-demo"> <div v-swipe="swipeInit" class="ui-swiper-container"> <div class="ui-swiper"> <div class="ui-swiper-box" v-for="item in list"> <img class="ui-swiper-filter" :src="item.smallImg" :data-src="item.img" alt=""> </div> </div> </div> </div>options
- delay - 轮播时间，默认3000ms
- type: Number
- required : false
- default : 3000
- autoPlay - 是否自动播放
- type: Boolean
- required : true
- default : true
tips
需要显示的图片列表可以加一个宽度60px的小图片作为懒加载用于显示的展位图
<img class="ui-swiper-filter" :src="item.smallImg" :data-src="item.img" alt="">
- todolist
- 1:左右滑动开始的回调方法
- 2:左右滑动结束的回调方法
- 3:设置默认图片
