vue-awesome-swiper H5页面使用遇到的问题

一、自动滚动中遇到的问题

现象：第一个滚动项不能点击

原因：swiper在轮播的时候会默认拷贝第一个和最后一个内容，但是不能准确的复制事件，所以第一个元素实际上是一个复制元素

解决办法：不直接给元素上加click事件，而是通过配置监听函数，代码如下

get swiperOption() {
    // 这个地方需要建立this的引用，事件中拿到的this是swiper实例 
    const that = this;
    return {
        observer: true,
        observeParents: true,
        observeSlideChildren: true,
        direction: 'vertical',
        autoplay: {
            delay: 2000,
        },
        loop: true,
        on: {
            /**
             *  在对swiper元素进行点击操作的时候，如果是轮播最好采用这种事件监听模式
             *  loop 开启的时候，dom 绑定事件是有问题的。因为在loop模式下slides前后会复制若干个slide，从而形成一个环路，但是却不会复制绑定在dom上的click事件
             */
            click: function() {
                // 这个this指向了swiper实例
                const clickIndex: number = (this as any).realIndex;
                that.$emit('notice-click', that.notices[clickIndex]);
            },
            autoplay: function() {
                // ***
            },
        },
    };
}

二、元素内容超过了外层容器

现象：最后一个元素被遮挡

原因：为了给滚动元素之间产生间隔，给每个元素设置了margin

解决办法：通过spaceBetween来设置滑动元素的间隔

实现效果如下：

为了让第二个元素漏出来一点的配置

option = {
    // 确保元素在屏幕中所占比例不变
    width: (元素占据设计稿的宽度 / 整个屏幕的宽度) * window.innerWidth,
    spaceBetween: 12,
};

三、上下滚动没有出现滚动效果

现象：页面轮播过久的，上下轮播的时候，元素切换是直接内容切换，没有出现过渡特效

原因：没有找到更本原因。

解决办法：暂无，只能退出app，再次进入则恢复正常。