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

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

因为公司业务需要在首页做一个活动入口可滑动的滑块。
刚开始用了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;

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

最后

以上就是失眠薯片为你收集整理的微信小程序滑块组件穿透问题的全部内容，希望文章能够帮你解决微信小程序滑块组件穿透问题所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。