概述
移动端高效图片轮播插件。
按需引入
import Vue from 'vue';
import {Slider, SliderItem} from 'vue-ydui/dist/lib.rem/slider';
/* 使用px：import {Slider, SliderItem} from 'vue-ydui/dist/lib.px/slider'; */
Vue.component(Slider.name, Slider);
Vue.component(SliderItem.name, SliderItem);代码示例
<template>
<yd-slider autoplay="3000">
<yd-slider-item>
<a href="http://www.ydcss.com">
<img src="http://static.ydcss.com/uploads/ydui/1.jpg">
</a>
</yd-slider-item>
<yd-slider-item>
<a href="http://www.ydcss.com">
<img src="http://static.ydcss.com/uploads/ydui/2.jpg">
</a>
</yd-slider-item>
<yd-slider-item>
<a href="http://www.ydcss.com">
<img src="http://static.ydcss.com/uploads/ydui/3.jpg">
</a>
</yd-slider-item>
</yd-slider>
</template>
<script type="text/babel">
export default {
}
</script>
设置autoplay="3000"将会3秒自动轮播。
<template>
<div style="height: 275px;">
<yd-slider autoplay="3000" direction="vertical">
<yd-slider-item>
<a href="http://www.ydcss.com">
<img src="http://static.ydcss.com/uploads/ydui/1.jpg">
</a>
</yd-slider-item>
<yd-slider-item>
<a href="http://www.ydcss.com">
<img src="http://static.ydcss.com/uploads/ydui/2.jpg">
</a>
</yd-slider-item>
<yd-slider-item>
<a href="http://www.ydcss.com">
<img src="http://static.ydcss.com/uploads/ydui/3.jpg">
</a>
</yd-slider-item>
</yd-slider>
</div>
</template>
<script type="text/babel">
export default {
}
</script>纵向轮播是需要在其父级设置内容高度的。
<template>
<yd-slider :ready="start1">
<yd-slider-item v-for="item in list">
<a href="http://www.ydcss.com">
<img :src="item">
</a>
</yd-slider-item>
</yd-slider>
</template>
<script>
export default {
data() {
return {
start1: false,
list: []
}
},
mounted() {
setTimeout(() => {
this.list = [
'http://static.ydcss.com/uploads/ydui/1.jpg',
'http://static.ydcss.com/uploads/ydui/2.jpg',
'http://static.ydcss.com/uploads/ydui/3.jpg'
];
this.start1 = true;
}, 1500);
}
}
</script>将参数ready绑定到一个本地变量 start1(值为false)，再获取数据完毕后，将其设置为true即可。