zoukankan      html  css  js  c++  java
  • vue-awesome-swiper实现轮播图

    1.首先通过npm安装vue-awesome-swiper,我在项目中用的是2.6.7版本

        npm install vue-awesome-swiper@2.6.7 –save

    2. 在main.js中引入

    import VueAwesomeSwiper from 'vue-awesome-swiper'

    import 'swiper/dist/css/swiper.css'

    Vue.use(VueAwesomeSwiper)

    3.实现轮播图

    1. <template>
    2.  <div class="wrapper">
    3.  <swiper :options="swiperOption" v-if="showSwiper" ref="mySwiper" >
    4.     <!-- slides -->
    5.     <swiper-slide v-for="item of list" :key="item.id">
    6.        <img class="swiper-img" :src="item.imgUrl"/>
    7.     </swiper-slide>
    8.     <div class="swiper-pagination" slot="pagination"></div>
    9.   </swiper>
    10.   </div>
    11. </template>
    12.  
    13. <script>
    14.     export default {
    15.         name:"HomeSwiper",
    16.         props:{
    17.           list:Array
    18.         },
    19.         data (){
    20.            return{
    21.             swiperOption:{
    22.                pagination:".swiper-pagination",
    23.                autoplay: 2000,
    24.                loop:true,
    25.                paginationClickable: true,
    26.                observer:true,
    27.                observeParents:true
    28.             }
    29.  
    30.           }
    31.         } ,
    32.          computed: {
    33.           showSwiper () {
    34.           return this.list.length
    35.         }
    36.       }
    37.     }
    38.  
    39. </script>
    40.  
    41. <style lang="stylus" scoped>
    42.   .wrapper >>> .swiper-pagination-bullet-active
    43.     background:#fff
    44.   .wrapper
    45.     overflow:hidden
    46.     100%
    47.     height 0
    48.     padding-bottom:31.25%
    49.     background:#eee
    50.     .swiper-img
    51.        100%
    52. </style>
  • 相关阅读:
    [模板]KMP
    [BZOJ] 1833: [ZJOI2010]count 数字计数
    [BZOJ] 1563: [NOI2009]诗人小G
    [BZOJ] 2442: [Usaco2011 Open]修剪草坪
    [LOJ] #2360. 「NOIP2016」换教室
    9.18模拟赛
    [BZOJ] 2006: [NOI2010]超级钢琴
    [BZOJ] 1143: [CTSC2008]祭祀river
    [51Nod] 1218 最长递增子序列 V2
    [BZOJ] 3307: 雨天的尾巴
  • 原文地址:https://www.cnblogs.com/wangyawei/p/9005974.html
Copyright © 2011-2022 走看看