slidesPerView: 1,//设置slider容器能够同时显示的slides数量(carousel模式)。可以设置为数字（可为小数，小数不可loop），或者 'auto'则自动根据slides的宽度来设定数量。loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。
mousewheel: false,//开启鼠标滚轮控制Swiper切换。可设置鼠标选项，默认值false
mousewheelControl: false,//同上
height: window.innerHeight, // 高度设置，占满设备高度
resistanceRatio: 0,//抵抗率。边缘抵抗力的大小比例。值越小抵抗越大越难将slide拖离边缘，0时完全无法拖离。本业务需要
observeParents: true,//将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新
// 如果自行设计了插件，那么插件的一些配置相关参数，也应该出现在这个对象中，如下debugger
debugger: true,
// swiper的各种回调函数也可以出现在这个对象中，和swiper官方一样
onTransitionStart(swiper){
console.log(swiper)
}
}
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper
}
},
mounted() {
// current swiper instance
// 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
console.log('this is current swiper instance object', this.swiper)
this.swiper.slideTo(3, 1000, false)
}
}
</script>
<style scoped>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-to{
opacity: 0
}
.swiper-wrapper{
height: 100px;
}
.swiper-slide1{
background: skyblue;
}
.swiper-slide2{
background: yellowgreen;
}
.swiper-slide3{
background: blanchedalmond;
}
</style>
总结
以上所述是小编给大家介绍的vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
