背景
设计稿需要做一个横向滑动的样式和交互,第一反应就是使用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