项目中有用到轮播图的地方并且一屏中竖着展示两个，我用的是vue-awesome-swiper，感觉参数那不是很熟悉，记录一下

weixin_46156770

于 2021-04-21 13:45:23 发布

阅读量630

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_46156770/article/details/115949094

版权

vue 专栏收录该内容

41 篇文章

订阅专栏

1.首先需要安装vue-awesome-swiper

npm install vue-awesome-swiper --save

2.全局引入 main.js中引入

//轮播图
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
import 'swiper/dist/css/swiper.css'//(css 不显示的问题可能就在这)

在组件中使用

// template中
<swiper :options="swiperOption">
     <swiper-slide v-for="(it,index) of learningData" :key="index">
       <span @click="enterDetail(it.id)">进入</span>
       <img
         :src="it.picture != null ? `/service/mooc-file-server/file/browse/${it.picture}`:require('@/assets/imgs/courseSet.png')"
         alt="" width="100%" height="132px">
     </swiper-slide>
     <div class="swiper-pagination" slot="pagination"></div>
 </swiper>



//  data函数中
swiperOption: {
    loop: false,  //是否循环播放
    slidesPerColumn: 2,  //竖着展示2张图片
    // slidesPerGroup: 2,
    autoplay: false,
    // 显示分页
    pagination: {
      el: '.swiper-pagination',
      clickable: true
    },
  },