better-scorll 横向滚动无效

最新推荐文章于 2023-11-01 10:47:22 发布

原创

最新推荐文章于 2023-11-01 10:47:22 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#better-scroll #高仿饿了么

在高仿饿了么项目中遇到better-scroll横向滚动无效的挑战。问题关键在于内部容器不能有同级元素，且元素高度需超过外部包装器。解决方法包括使用nextTick确保DOM渲染后创建BScroll实例，以及在横向滚动中手动设置元素宽度和配置属性如scrollX: true, scrollY: false, eventPassthrough: 'vertical'。通过细致的排查和对比，成功解决了滚动问题。" 120856130,11478321,财务报表分析：揭示企业造假的线索,"['财务分析', '会计报表', '风险管理', '企业经营', '财务造假']

高仿饿了么项目中用到了很多better-scroll插件，基本上都是垂直滚动。

有几个点必须要注意，一个是外部包装器wrapper通过ref="",命名后在创建BScroll实例时作为参数传入并添加其他参数。 this.scroll = new BScroll(this.$refs.yourWrapper,{其他配置参数});
这里也有两个点需要注意，一个是内部容器只能是独立的div或者其他元素，不能存在多个同级的元素，即以下结构是不能滚动的。

<div class="classifyTitle"  ref="wrapper">
    <div class="">
	ss
    </div>
    <ul>
	<li v-for="(item, index) in products" :key="index">
	</li>
    </ul>
</div>

另外一个就是高度问题，只有当内部元素的高度超过了wrapper包装容器的高度后才能滚动，这里有一个渲染时差的问题。
这就是nextTick发挥作用的时候了。

this.$nextTick(() => {
	  this._initScroll();
});

把new BScroll代码放在nextTick中，即当dom渲染结束后，能拿到对应的元素宽高时再创建BScroll实例，这样就能保证内部元素的高度超过wrapper，并正常滚动。

为一个横向滚动的例子，就是商品实景展示，即多张图片横向排列并实现滚动展示。
其他的逻辑和垂直滚动一致，有一个例外，就是需要手动设置元素的宽度，我就掉进这个坑里了。
也是我自己二，愣是没看出问题。需要计算素有元素宽度并设置ul width属性值。

let wid = (picWidth + margin) * this.sellerInfo.pics.length - margin;
this.$refs.picList.style.widt

最低0.47元/天解锁文章