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

最新推荐文章于 2024-07-23 08:55:57 发布

nibelung_

最新推荐文章于 2024-07-23 08:55:57 发布

阅读量1.5k

点赞数

分类专栏：小程序文章标签：小程序 movable-view 小程序滑块小程序滑动组件

本文链接：https://blog.csdn.net/nibelung_/article/details/85052611

版权

在微信小程序中创建滑动活动入口时，遇到滑块组件穿透导致上拉刷新的问题。尝试了通用的JS解决方案后，发现用户体验不佳。官方提供了movable-view和movable-area组件，但它们会遮挡底部元素，阻止点击。通过在movable-area添加特定CSS属性，并在movable-view中应用相应设置，成功实现了滑块点击穿透，允许用户点击滑块下方的商品链接跳转详情页。

摘要由CSDN通过智能技术生成

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

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