vue-awesome-swiper 简单使用以及常见问题

当我们做轮播的时候，首先想到的基本上都是swiper，在vue脚手架上也有对swiper进行了封装。vue-awesome-swiper GitHub 地址。在GitHub上的点赞还是蛮高的一个类库。这里讲下遇到的常用的用法。细节方面还是移步swiper官方文档。

安装类库和引入类库

• 终端下执行命令

npm install vue-awesome-swiper --save

• 在main.js中引入swiper组件

// 全局加载轮播
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper);

// 组件加载
import 'swiper/dist/css/swiper.css'

import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  components: {
    swiper,
    swiperSlide
  }
}

垂直全屏轮播配置

• 实例代码，仅供参考

  <template>
    <div class="home_page">
        <swiper ref="vSwiper" :options="vSwiper" class="v_contain">
            <swiper-slide v-for="(item, index) in pages" :key="index">
                <div class="single">
                    <component :is="item" :ref="item" @next="next"></component>
                </div>
            </swiper-slide>
        </swiper>
        <div class="arrow arrow_animate" >
            <img v-show="isShow" src="../../assets/image/arrow.png">
        </div>
    </div>
</template>


<script>

import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import onePage from '../../components/one';
import twoPage from '../../components/two';
import threePage from '../../components/three';
import fourPage from '../../components/four';

export default {
    data() {
        return {
            vSwiper: {
                direction: 'vertical',
                on: {
                    slideChangeTransitionEnd: ()=>{
                        const activeIndex = this.$refs.vSwiper.swiper.activeIndex;
                    }
                }
            },
            pages:['onePage', 'twoPage', 'threePage', 'fourPage'],
        }
    },
    components: {
        swiper, 
        onePage,
        twoPage,
        threePage,
        fourPage
    },
    methods: {
        next() {
            this.$refs.vSwiper.swiper.slideNext();
        }
    }
}
</script>


<style lang="scss" scoped>
    @import '../../common/css/mixin.scss';
    .home_page{
        width: 100%;
        height: 100%;
        .v_contain {
            width: 100%;
            height: 100%;
            .single {
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
        }
    }
</style>

这里引用了四个组件，通过for来依次把组件加到单个swiper-slide中。<component></component> 标签是Vue框架自定义的标签，它的用途就是可以动态绑定我们的组件，根据数据的不同更换不同的组件。通过is来绑定所依赖的组件。
不太准确，通俗的说，它就像是组件的泛类。不管什么组件，通过component都可以直接动态绑定。

常见方法

• swiperOption配置和swiper官方文档的配置字段，都是一模一样，所有的字段属性，方法，参照文档更加清楚。
  

  配置

• 通过ref绑定swiper可以很方便的在任何地方去获取到swiper的状态，以下例举几种常用的方法。

//获取到`swiper`当前显示的页面。
this.$refs.vSwiper.swiper.activeIndex;
//比如说切换页面。下一页，上一页：
this.$refs.vSwiper.swiper.slideNext();
this.$refs.vSwiper.swiper.slidePrev();
//切换到指定页
this.$refs.vSwiper.slideTo(3, 1000, false);

使用方法在官方文档也有标注出来，我们也可以自己从页面log中看到swiper的属性

swiper的属性

修改pagination（分页）样式。

• tempalte部分。在vue的tempalte里面找一个地方，随便一个地方写入如下代码。放置分页器的卡槽。

        <div class="swiper-pagination" id="pagination" slot="pagination"></div>

• script部分。在data中的swipeOption配置分页器对应的css名称

          hSwiper: {
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                    bulletClass: 'my-bullet',
                    bulletActiveClass: 'my-bullet-active'
                },
            }

• 样式部分。在style里面，记得不能用scope。单独定义一个非scope的style。自定义的样式。
  pagination的bottom可以去修改分页器的底部位置。
  my-bullet未激活的分页器样式。
  my-bullet-active 激活后的分页器样式。

<style lang="scss">
    #pagination {
        width: 100%;
        bottom: 1.8rem;
    }
    .my-bullet{
        display: inline-block;
        margin: 0rem 0.08rem;
        background: #fae2ee;
        width: .15rem;
        height: .15rem;
        border-radius: 50%;
    }
    .my-bullet-active{
        background: #e13194;
        width: .15rem;
        height: .15rem;
        border-radius: 50%;
    }
</style>