美文网首页
v2.5.16如何配置vue-awesome-swiper

v2.5.16如何配置vue-awesome-swiper

作者: 阳光之城alt | 来源:发表于2018-07-01 11:57 被阅读0次
    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;
    
    
    

    相关文章

      网友评论

          本文标题:v2.5.16如何配置vue-awesome-swiper

          本文链接:https://www.haomeiwen.com/subject/ixecuftx.html