v2.5.16如何配置vue-awesome-swiper
2018-07-01 本文已影响0人
阳光之城alt
image.png
1
1 https://github.com/surmon-china/vue-awesome-swiper
2 cnpm i vue-awesome-swiper@2.6.7 --save
2
<template>
<div class="wrapper">
<swiper :options="swiperOption" ref="mySwiper" >
<!-- slides -->
<swiper-slide v-for="(item) of swplist" :key="item.id">
<img :src="item.img" class="swipe-img">
</swiper-slide>
<!-- Optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
export default {
name:"homeswiper",
data(){
return{
swiperOption:{
pagination : '.swiper-pagination',
loop:true
},
swplist:[
{
id:'0001',
img:"https://imgs.qunarzz.com/piao/fusion/1806/3c/c72a1ccd4d7b2202.jpg_640x170_a4d1cf68.jpg"
},
{
id:'0002',
img:"https://imgs.qunarzz.com/piao/fusion/1806/fc/e47aa3e1c67bbc02.jpg_640x170_f81a8de8.jpg"
},
{
id:'0003',
img:"https://imgs.qunarzz.com/piao/fusion/1804/5c/969bfa7af00a2702.jpg_640x170_ec465291.jpg"
}
,
{
id:'0004',
img:"https://imgs.qunarzz.com/piao/fusion/1804/bd/8e4a1c3f470d3702.jpg_640x170_c1e8baeb.jpg"
}
,
{
id:'0005',
img:"https://imgs.qunarzz.com/piao/fusion/1710/94/e41712475cc4e702.jpg_640x170_f5dd3e83.jpg"
}
]
}
}
}
</script>
<style lang="stylus" scoped>
.wrapper>>>.swiper-pagination-bullet-active
background: #fff;
.wrapper
width:100%
height:0
overflow:hidden
padding-bottom 26.5%
background #eee
.swipe-img
width :100%
</style>
解决 swiper lag , 可能是渲染背景backface-visibility后导致卡顿吧!
//以下代码添加到.swiper-wrapper中
-webkit-perspective: 3000;
-webkit-backface-visibility: hidden;