Vue cli3使用vue-awesome-swiper

https://www.npmjs.com/package/vue-awesome-swiper
官網 區別 vue-cli2 和vue-cli3 在於其中的 css 的樣式不在不在

import 'swiper/css/swiper.css'

vue-cli2 css 文件樣式

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

少去一個文件夾，這就是區別，其他是方法一樣
屬性介紹

<template>
 <div class="commodity">
 <div class="container">
 <swiper class='swiImgs' :options="swiperOption" v-if="commodity.length!=0">
 <swiper-slide v-for="(item, index) in commodity" data-index="index" :key="index" class="item">
 <img class='swiImg' :src='item'/>
 </swiper-slide>
 <div class="swiper-scrollbar"></div>
<! 滾動條>
 <div class="swiper-button-next"></div>
<! 下一頁>
 <div class="swiper-button-prev"></div>
<! 上一頁>
 <div class="swiper-pagination" v-for="(item,index) in detailimages" :key="index"
 slot="pagination"></div>
 </swiper>
 <span class='swiText' v-if='commodity'>{{imgIndex}}/{{commodity.length}}</span>
 </div>
 </div>
</template>
<script>
 export default {
 data() {
 const that = this;
 return {
 commodity: [
 "https://boweisou.oss-cn-shenzhen.aliyuncs.com/yy/images/911a7002e11608fb581fffcde05d5257.jpg",
 "https://boweisou.oss-cn-shenzhen.aliyuncs.com/yy/images/2_1536049430.jpg",
 "https://boweisou.oss-cn-shenzhen.aliyuncs.com/yy/images/911a7002e11608fb581fffcde05d5257.jpg",
 "https://boweisou.oss-cn-shenzhen.aliyuncs.com/yy/images/2_1536049430.jpg"
 ],
 imgIndex: 1,
 swiperOption:
 {
 //是一個組件自有屬性，如果notNextTick設置為true，組件則不會通過NextTick來實例化swiper，也就意味著你可以在第一時間獲取到swiper對象，假如你需要剛加載遍使用獲取swiper對象來做什麼事，那麼這個屬性一定要是true
 notNextTick: true,
 //循環
 loop: true,
 //設定初始化時slide的索引
 initialSlide: 0,
 //自動播放
 autoplay:
 {
 delay: 1500,
 stopOnLastSlide: false,
 disableOnInteraction: false
 }
 ,
 //滑動速度
 speed: 800,
 //滑動方向
 direction: "horizontal",
 //小手掌抓取滑動
 grabCursor: true,
 //滑動之後回調函數
 on: {
 slideChangeTransitionStart: function () {
 that.imgIndex = this.realIndex + 1;
 //獲取輪播圖片下標索引；這裏有一個坑，之前網上找到的是用activeIndex，但後來網上說的是這個realIndex，原來activeIndex是swiper2.0的；而realIndex是swiper3.0的，（使用realIndex才實現了下標索引）
 }
 },
 //分頁器設置
 pagination: {
 el: ".swiper-pagination",
 clickable: true,
 type: "bullets"
 }
 }
 }
 },




 created() {
 this.swiperOption.autoplay = this.commodity.length != 1 ? { //控制只有一張圖片的時候不自動輪播
 delay: 1500,
 stopOnLastSlide: false,
 disableOnInteraction: false
 } : false;
 },
 methods: {}
 }
</script>
<style lang="less" rel="stylesheet/less">
 .commodity {
 background: #f5f5f5;
 .container {
 position: relative;
 .swiText {
 position: absolute;
 height: 0.5rem;
 width: 0.5rem;
 bottom: 0.2rem;
 right: 0.3rem;
 font-size: 0.33rem;
 color: #fff;
 z-index: 10;
 }
 .swiImgs {
 width: 100%;
 .item {
 height: 7.5rem;
 .swiImg {
 width: 100%;
 }
 }
 }
 }
 }
</style>