Vue中怎样使用swiper组件？

版权声明：xue_shuai https://blog.csdn.net/qq_41980461/article/details/91489105

我用的VS Code编译器，首先打开终端，进入项目（我是在13-vue文件夹下面的elem中使用）

[code]D:\study\web\13-vue\elem> cnpm install vue-awesome-swiper --save

然后在main.js中引用并使用

[code]import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper)

新建一个swiper组件，里面内容如下

[code]<template>
<div class="swiper">
<swiper :options="swiperOption" class="swiper-menu">
<!-- slides 列表项 -->
<swiper-slide>I'm Slide 1</swiper-slide>
<swiper-slide>I'm Slide 2</swiper-slide>
<!-- Optional controls 控制器 -->
<div class="swiper-scrollbar" slot="scrollbar"></div>
</swiper>
</div>
</template>

<script>
export default {
name: 'WaimaiSwiper',
data () {
return {
swiperOption: {
loop: true// 是否循环轮播
}
}
}
}
</script>

<style lang="stylus" scoped>

</style>

在父组件中使用该swiper组件

[code]<template>
<div>
<waimai-swiper></waimai-swiper>
</div>
</template>

<script>
import WaimaiSwiper from './components/swiper'
export default {
name: 'Waimai',
data () {
return {

}
},
components: {
WaimaiSwiper
}
}
</script>

效果如图所示

                               

 

若需要其他样式的swiper组件，详情参考Swiper中国