微信小程序滑块组件穿透问题

100 阅读 0 评论 66 点赞

我是靠谱客的博主失眠薯片，这篇文章主要介绍微信小程序滑块组件穿透问题，现在分享给大家，希望可以做个参考。

微信小程序滑块组件穿透问题

因为公司业务需要在首页做一个活动入口可滑动的滑块。
刚开始用了JS通用的办法，通过计算clientX,clientY,来实现功能。
页面部分滑动事件
但是通过实际运行发现用户体验不是太好，滑块上划是容易触发页面的上拉刷新
…分割线…
微信官方提供了一个滑动组件movable-view和movable-area
这两个组件是在一起的movable-view必须在movable-area中。

复制代码

1
2
3
4
5
6
7
8
9
10
<movable-area style="height: 200px; width: 200px; background: red;">
<movable-view
style="height: 50px; width: 50px; background: blue;"
x="{{x}}"
y="{{y}}"
direction="all"
>
</movable-view>
</movable-area>

movable-area必须要有有个固定的高宽，movable-view是在area内拖动的。具体看官方文档
当movable-area有一个固定的高宽时就会遮挡底部的区域，遮挡住的商品无法实现点击跳转商品详情

当时想过很多办法，一个偶然的机会看到了篇文章，受到了启发
只需要在movable-area加上一个css属性