2018-03-26 vue-awesome-swiper左右滑

决心把遇见的swiper例子都记录下来，适用于电商wap站左右滑动，数据与页面动态关联

效果图：初始化显示三个半，左右滑动

前提：基于vue框架 需要安装 npm install vue-awesome-swiper

//页面
<template>
    <div class="moduleSeckill">
        <div class="seckill-header">今日秒杀</div>
        <div class="seckill-content">
            <swiper class="swiper-seckill" :not-next-tick="true" :options="swiperOption">
                <swiper-slide class="seckill-slide">
                    <a href="#">
                        <div class="goods_info">
                            <img src="../assets/img/2x.png" />
                            <div class="price">￥9.9</div>
                        </div>
                    </a>
                </swiper-slide>
                <swiper-slide class="seckill-slide">
                    <a href="#">
                        <div class="goods_info">
                            <img src="../assets/img/2x.png" />
                            <div class="price">￥9.9</div>
                        </div>
                    </a>
                </swiper-slide>
                <swiper-slide class="seckill-slide">
                    <a href="#">
                        <div class="goods_info">
                            <img src="../assets/img/2x.png" />
                            <div class="price">￥9.9</div>
                        </div>
                    </a>
                </swiper-slide>
                <swiper-slide class="seckill-slide">
                    <a href="#">
                        <div class="goods_info">
                            <img src="../assets/img/2x.png" />
                            <div class="price">￥9.9</div>
                        </div>
                    </a>
                </swiper-slide>

                <swiper-slide class="seckill-slide">
                    <a href="#">
                        <div class="goods_info">
                            <img src="../assets/img/2x.png" />
                            <div class="price">￥9.9</div>
                        </div>
                    </a>
                </swiper-slide>

            </swiper>
        </div>

    </div>
</template>
<script>
    // 引入swiper相关组件
    import {swiper,swiperSlide} from 'vue-awesome-swiper'
    export default {
        data() {
                return {
                    swiperOption: {
                        slidesPerView: 'auto',
                        grabCursor: true,
                        setWrapperSize: true,
                        autoHeight: true,
                        freeMode: true,
                        observer: true
                    }
                }
            },
            components: {
                swiper,
                swiperSlide
            }
    }
</script>
<style lang="less" scoped="scoped">
    .moduleSeckill {
        width: 10rem;
        height: auto;
        margin: 0 auto;
        background: #fff;
        .seckill-header {
            width: 100%;
            height: 1.066667rem;
            background: #fff;
            line-height: 1.066667rem;
            font-size: 0.48rem;
            color: #333;
            text-align: center;
            border-bottom: 2px solid #ccc;
        }
        .seckill-content {
            width: 10rem;
            background: #fff;
            height: 3.68rem;
            .swiper-seckill {
                height: 3.68rem;
                .seckill-slide {
                    width: 2.293333rem;
                    margin: 0.32rem 0.32rem 0 0.32rem;
                    float: left;
                    a {
                        display: block;
                        overflow: hidden;
                        width: 100%;
                        height: 100%;
                        .goods_info {
                            width: 2.293333rem;
                            background: #fff;
                            img {
                                width: 2.293333rem;
                                height: 2.293333rem;
                            }
                            .price {
                                width: 2.293333rem;
                                height: 0.533333rem;
                                font-size: 0.373333rem;
                                color: #FD157A;
                                line-height: 0.533333rem;
                                margin-top: 0.32rem;
                                margin-bottom: 0.24rem;
                                text-align: center;
                            }
                        }
                    }
                }
            }
        }
    }
</style>