前言：
因为移动端项目的需要，我在项目中经过考虑使用的mint-ui的框架，但是使用他提供的swiper插件以后，感觉坑太多，填不动的感觉，故经过查找并实际测试，发现一款使用挺好的swiper插件 vue-swiper-component
效果图：
步骤：
第一：安装插件
npm i vue-swiper-component
第二：封装好的组件：cswiper.vue
<template>
<Swiper
v-if="list.length>0"
:autoPlay='autoPlay'
:showIndicator='showIndicator'
:interval="interval"
:duration="duration"
>
<Slide v-for="(item,index) in list" :key="index" @click="clickSwiper(item)">
<img :src=" item.img_url"/>
<p>{{item.title}}</p>
</Slide>
</Swiper>
</template>
<script>
import { Swiper, Slide } from 'vue-swiper-component';
export default {
props: {
/**
* 轮播图数据
*/
list:Array,
/**
* 是否自动轮播
*/
autoPlay:{
type:Boolean,
default:false
},
/**
* 是否显示轮播的点
*/
showIndicator:{
type:Boolean,
default:false
},
/**
* 每两次隔多久滚动一次
*/
interval:{
type:Number,
default:2500
},
/**
* 每次滚动一页需要多久
*/
duration:{
type:Number,
default:500
},
},
data () {
return {
};
},
components: {
Swiper,
Slide
},
computed: {},
mounted() {},
methods: {
/**
* 轮播图点击事件
*/
clickSwiper(data){
this.$emit('clickSwiper',data);
}
},
watch: {}
}
</script>
<style lang='less' scoped>
</style>
第三：调用方法：
template:
<cswiper class="swiperDiv" :list='swiperList' @clickSwiper='clickSwiper'></cswiper>
js:
import cswiper from '@/components/common/cswiper' //swiper
components: {
MSwiper
},
data:{
swiperList:[//banner主图数据
{img_url: require("../../assets/image/demo.png"),title: "文章标题1",id: "1" },
{img_url: require("../../assets/image/demo.png"),title: "文章标题2",id: "2" },
{img_url: require("../../assets/image/demo.png"),title: "文章标题3",id: "3" },
{img_url: require("../../assets/image/demo.png"),title: "文章标题4",id: "4" },
],
}
更多资料：
https://blog.csdn.net/qq_42925191/article/details/81904530
