vue-awesome-swiper在Vue中的应用
2020-11-18 本文已影响0人
handsomePeng
vue-awesome-swiper在Vue的应用
vue-awesome-swiper是基于swiper的,安装不同版本的vue-awesome-swiper对应不同的swiper,所以swiper里面的属性多数能应用到vue-awesome-swiper中,也可以根据swiper文档来设置vue-awesome-swiper属性;
swiper官方文档:https://www.swiper.com.cn/api/index2.html;
在这里我使用的是vue-awesome-swiper V3.1.3(对应swiper4),文档参考:https://github.com/surmon-china/vue-awesome-swiper/tree/v3.1.3
vue-awesome-swiper(v3.1.3)安装
npm install --save vue-awesome-swiper@3.1.3
vue-awesome-swiper(v3.1.3)应用(单文件组件)
1.单文件组件中安装(导入)swiper
// require styles
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
components: {
swiper,
swiperSlide
}
}
- 添加组件摸板
<template>
<div>
child2
<swiper :options="swiperOption" class="czp">
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
<swiper-slide>Slide 4</swiper-slide>
<swiper-slide>Slide 5</swiper-slide>
<swiper-slide>Slide 6</swiper-slide>
<swiper-slide>Slide 7</swiper-slide>
<swiper-slide>Slide 8</swiper-slide>
<swiper-slide>Slide 9</swiper-slide>
<swiper-slide>Slide 10</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
- 根据需求编辑swiper参数
<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
data () {
return {
// Some Swiper option/callback...
swiperOption: {
// 所有的参数同 swiper 官方 api 参数
direction: 'vertical',
pagination: {
el: '.swiper-pagination',
clickable: true
},
autoplay: {
delay: 1500,
stopOnLastSlide: false,
disableOnInteraction: true
}// 可选选项,自动滑动
}
}
},
components: {
swiper,
swiperSlide
}
}
</script>
- 根据需求添加额外css样式
<style lang='scss' scoped>
div{
background: gold;
}
.czp{
height: 300px
}
</style>
参考:一个完整使用了vue-awesome-swiper的单文件组件(.vue)
<template>
<div>
child2
<swiper :options="swiperOption" class="czp">
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
<swiper-slide>Slide 4</swiper-slide>
<swiper-slide>Slide 5</swiper-slide>
<swiper-slide>Slide 6</swiper-slide>
<swiper-slide>Slide 7</swiper-slide>
<swiper-slide>Slide 8</swiper-slide>
<swiper-slide>Slide 9</swiper-slide>
<swiper-slide>Slide 10</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
data () {
return {
// Some Swiper option/callback...
swiperOption: {
// 所有的参数同 swiper 官方 api 参数
direction: 'vertical',
pagination: {
el: '.swiper-pagination',
clickable: true
},
autoplay: {
delay: 1500,
stopOnLastSlide: false,
disableOnInteraction: true
}// 可选选项,自动滑动
}
}
},
components: {
swiper,
swiperSlide
}
}
</script>
<style lang='scss' scoped>
div{
background: gold;
}
.czp{
height: 300px
}
</style>