快手小程序 swiper 滑动失效解决办法

145 阅读1分钟

uniapp开发小程序的时候,微信,抖音里的swiper滑动都正常,但是在快手这里,复杂页面会有swiper滑动一下,不进入下一个item的问题,并且整个swiper滑动变为无效,这是因为层级问题导致的功能bug,解决办法是在swiper外层套一个view并给定更高层级(z-index),解决滑动失效问题.

<swiper class="swiper" circular style="height: 120px;">
  <swiper-item class="swiper-item" style="height: 130px;width: 100%">
    <view class="uni-bg-red">A</view>
  </swiper-item>
  <swiper-item class="swiper-item" style="height: 130px;width: 100%">
    <view class="uni-bg-green">B</view>
  </swiper-item>
  <swiper-item class="swiper-item" style="height: 130px;width: 100%">
    <view class="uni-bg-blue">C</view>
  </swiper-item>
  <swiper-item class="swiper-item" style="height: 130px;width: 100%">
    <view class="uni-bg-blue">D</view>
  </swiper-item>
</swiper>

解决

<view style="position: absolute; z-index: 9999">
    <swiper>...</swiper>
</view>