better-scroll 横向滑动配置,加出现的问题

631 阅读1分钟

背景

设计稿需要做一个横向滑动的样式和交互,第一反应就是使用better-scroll, 但是确实出现了问题

配置

<div class="wrapper" ref="wrapper">
    <ul>
        <li>1</li>
        <li>2</li>
    </ul>
</div>
ul {
    display: flex;
}
li {
    white-space: nowrap;
}
import BScroll from '@better-scroll/core';
mounted () {
    this.$nextTick(() => {
        const options = {
            scrollX: true,
            probeType: 3,
            click: false, /* 阻止点击事件跳转两次的问题 */
            preventDefault: false, /* 阻止点击事件跳转两次的问题 */
            momentumLimitTime: 1000,
            eventPassthrough: 'vertical' 
        };
            // 判断ios是否大于13.4,有个兼容性抖动问题
        if (util.isIosBiggerAndEqualThanVersion('13.4.0')) {
            options.bounce = {
                top: false,
                bottom: false
            };
        }
        this.bs = new BScroll(this.$refs.wrapper, options);
    });
},

问题

如果这个H5页面在APP里面打开,就会跟APP里面的手势返回冲突, eventPassthrough: 'vertical' 如果不加这个属性,上下滑动页面就不行,加上这个属性,就导致,横向滑动触发APP返回,解决方案,使用swiper