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>