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.     width:100%
  47.     height 0
  48.     padding-bottom:31.25%
  49.     background:#eee
  50.     .swiper-img
  51.        width:100%
  52. </style>

最新文章

  1. norflash驱动编写笔记
  2. python 多线程和多核
  3. apktool反编译apk文件
  4. MVC @functions
  5. css 字数超过一行显示省略号
  6. 自己写CPU第九阶段（3）——加载存储指令说明2（swl、swr）
  7. 验证mySqli扩展是否
  8. 对Java的初识
  9. struts2（四）之输入校验
  10. c#关键字及ref和out
  11. 关于docker jenkins启动时失败的问题处理
  12. 从AST编译解析谈到写babel插件
  13. 尚硅谷springboot学习30-docker安装mysql示例
  14. 《算法》第四章部分程序 part 11
  15. SpringMVC框架04——RESTful入门
  16. 20155211 2016-2017-2 《Java程序设计》第九周学习总结
  17. mongodb 日志清理
  18. JS设计模式——3.封装与信息隐藏
  19. ogr2ogr使用
  20. spring和hibernate整合，事务管理

热门文章

  1. Flutter SDK的下载与安装步骤 (mac版)
  2. Memento模式(备忘录设计模式)
  3. P1984 [SDOI2008]烧水问题（具体证明）
  4. P4135 作诗
  5. docker jvm 占用高的问题定位
  6. Appium + Python自动化3 - 输入中文
  7. 埃氏筛法（求n以内有多少个素数）
  8. CodeForces - 589B
  9. Java面向对象_接口应用——策略模式
  10. Python 将IP转换为int