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

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

因为公司业务需要在首页做一个活动入口可滑动的滑块。
刚开始用了JS通用的办法，通过计算clientX,clientY,来实现功能。

但是通过实际运行发现用户体验不是太好，滑块上划是容易触发页面的上拉刷新
…分割线…
微信官方提供了一个滑动组件movable-view和movable-area
这两个组件是在一起的movable-view必须在movable-area中。

<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属性

pointer-events: none;

在movable-view里加上

pointer-events: auto;

就可以实现点击穿透的效果。