SSR 中 vue-awesome-swiper 实现横向滑动效果

背景

要实现一个常见的功能，就是H5页面里面做一个横向滑动的卡片样式

配置

1. 把 vue-awesome-swiper 放到插件里

// /plugins/vue-awesome-swiper.client.js

import Vue from 'vue';
// import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr';

if (process.browser) {
    const VueAwesomeSwiper = require('vue-awesome-swiper/dist/ssr');
    Vue.use(VueAwesomeSwiper);
}

注意swiper-wrapper 和 swiper-slide 这两个类名 一定要写

<div
    v-swiper:mySwiper="swiperOption"
    class="wrapper"
>
    <div class="swiper-wrapper">
        <ul class="swiper-slide">
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>

export default {
    data () {
        return {
            swiperOption: {
               slidesPerView: 'auto',
                // spaceBetween: 0, /* 在slide之间设置距离（单位px） */
                // observer: true, /* 启动动态检查器(OB/观众/观看者)，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper */
                // observeParents: true, /* 将observe应用于Swiper的祖先元素。当Swiper的祖先元素变化时，例如window.resize，Swiper更新。 */
                freeMode: true, /* free模式，slide会根据惯性滑动且不会贴合 */
                freeModeMomentumBounce: true, /* 动量反弹。false时禁用free模式下的动量反弹，slides通过惯性滑动到边缘时，无法反弹 */
                freeModeMomentumRatio: 0.2, /* 值越大产生的边界反弹效果越明显，反弹距离越大。 */
                freeModeMomentumVelocityRatio: 0.4 /* free模式惯性速度，设置越大，释放后滑得越快。 */
            },
        }
    },
}
<style lang="scss" scoped>
@import url('swiper/dist/css/swiper.css');
</style>