1.0.0 • Published 6 years ago
vue-mobile-slider v1.0.0
vue-mobile-slider,移动端使用的轮播组件
版本
vue2.0+
特点
- 轻量(12kb+)
- 配置简单
安装
npm install vue-mobile-slider --save
如何使用
<template>
<div id="app">
<div class="slider-wrapper">
<Slider :autoPlay="true" :interval="4000" :autoPlay="true" :speend="400" items="false">
<div v-for="item in sliders">
<a :href="item.linkUrl">
<img :src="item.picUrl"/>
</a>
</div>
</Slider>
</div>
</div>
</template>
<script>
import Slider from 'vue-mobile-slider'
export default {
data() {
return {
sliders: []
}
},
components: {
Slider
}
}
</script>
<style lang="scss">
.slider-wrapper {
position: relative;
width: 100%;
overflow: hidden;
}
</style>
\<script>标签直接引入
<div class="slider-wrapper">
<Slider :autoPlay="true" :interval="4000" :loop="true" @change="handleChange">
<div v-for="item in sliders">
<a :href="item.linkUrl">
<img :src="item.picUrl"/>
</a>
</div>
</Slider>
</div>
<script src="../dist/vue-mobile-slider.js"></script>
Vue.component('slider',VueSlider)
new Vue({
el:'#app',
data:{
sliders: []
},
methods:{
handleChange(index){
console.log(index)
}
}
})
API
Name | Type | Default | Default |
---|---|---|---|
loop | Boolean | true | 是否循环播放 |
autoPlay | Boolean | true | 是否自动播放 |
interval | Number | 4000(ms) | 播放间隔 |
speed | Number | 400 | 过渡动画时长 |
items | Boolean | true | 是否显示指示栏 |
注意
包裹组件的容器需加上这些样式
.slider-wrapper {
position: relative;
width: 100%;
overflow: hidden;
}
events
Name | Type | Default | Default |
---|---|---|---|
change | Function | -- | 每次滚动触发的回调函数 |
<Slider @change="handleChange"></Slider>
Slot
<Slider :autoPlay="true" :interval="4000" :loop="true" @change="handleChange">
<div v-for="item in sliders">
<a :href="item.linkUrl">
<img :src="item.picUrl"/>
</a>
</div>
</Slider>
1.0.0
6 years ago