</div>
</template>
<script>
import bannerurl1 from '../../assets/mall/banner.png'
import bannerurl2 from '../../assets/smart/holiday.png'
import bannerurl3 from '../../assets/smart/leave_home.png'
export default {
name: "SwiperBanner",
data() {
return {
swiperOption:{
direction:'horizontal',
spaceBetween:10,
observeParents: true, //观察父组件，当父组件变化时，自己随着变化
observer: true, //观察自己，自己的参数变化时，更新
centeredSlides:true, //设置为true时，活动块居中显示，默认下居左显示
loop:true, //滑动过程中会在前后复制多个slider,效果看起来是循环的
loopedSlides:3, //设置滑动过程中所要用到的loop个数
slidesPerView:'auto', //同时显示的slide数量
loopAdditionalSlides:100,
autoPlay:{
delay:3000,
disableOnInteraction:false //鼠标移动上去时是否继续播放
},
pagination : '.swiper-pagination',
paginationType : 'bullets',
paginationElement:'span'
}
}
},
props:{
BannerList:{
type:Array,
default:function(){
return [
{
bannerid:0,
imgurl:bannerurl1,
bannerlink:''
},{
bannerid:1,
imgurl:bannerurl2,
bannerlink:''
},{
bannerid:2,
imgurl:bannerurl3,
bannerlink:''
}
] }
}
},
methods: {
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper
}
},
mounted() {
console.log('this is current swiper instance object', this.swiper)
this.swiper.slideTo(3, 1000, false);
}
}
</script>
<style scoped>
.swiperbanner_container{
width:100%;
height:160px;
overflow: visible !important;
}
.swiper-pagination{
bottom:2px !important;
}
.banner_img{
width:100%;
height:116px;
}
</style>
需要使用到的参数可以在官方文档中看到具体的含义，点击链接自行查看。
这里有两个参数需要特别注意：
spaceBetween:10
这个参数用于设置两个slide之间的间隙，可根据自己的项目动态修改
observeParents: true
observer: true
观察父组件，当父组件变化时，自己动态改变，刚开始开发的时候我没有设置这个变量，发现滑动的时候特别不流畅，感觉就是普通的滑动效果，无法划一下就跳到下一个完整的slide上去就是因为这个变量没有设置，所以非常重要。
第四步，在需要的文件中引用它，并给他传值，这里不多说，没什么特殊性，和普通的引用方法一样。
