swiper-item中定义absolute元素，安卓端该元素被swiper-item遮挡
发布于 5 年前 作者 xiuying14 2754 次浏览 来自 问答

<view class="main">

  <swiper style="height:100vh" vertical="true" bindchange="swiperChange">
    <swiper-item>
      <image class="aelImage" src="https://linker-automake-1256733046.file.myqcloud.com/1/1575599065.jpg"></image>
    </swiper-item>
    <swiper-item>
      <image class="mImage" style="display:block" src="https://linker-automake-1256733046.file.myqcloud.com/1/1575599072.jpg"></image>
      <view style="position: relative;" class="lSwipe">
        <swiper circular="false" class="lSwipe">
          <swiper-item style="background-color: red;z-index:100;">
            <image class="lSwipe" src="https://linker-automake-1256733046.file.myqcloud.com/1/1575599077.jpg"> </image>
          </swiper-item>
        </swiper>
 
        <view style="position:absolute;width:84rpx;top:41%;left:10rpx;z-index:99999;background-color:red;min-height: 100rpx;">
          <image bindtap="clickLeft" mode="widthFix" style="width: 100%;" src="../../images/left.png" bindload="imageLoad">
          </image>
        </view>
 
        <view style="position:absolute;width:84rpx;top:41%;right:10rpx;z-index:999999;background-color:yellow;min-height: 100rpx;">
          <image bindtap="clickRight" mode="widthFix" style="width: 100%;" src="../../images/left.png">
          </image>
        </view>
      </view>
    </swiper-item>
  </swiper>
</view>
.main{
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
 
image{
  width: 100%;
}
 
/*小轮播尺寸*/
.mSwipe{
  width:750rpx;
  height: 424rpx
}
 
/*大轮播尺寸*/
.lSwipe{
  width:750rpx;
  height: 1052rpx
}
 
/*小图片尺寸*/
.mImage{
  width:750rpx;
  height: 424rpx
}
 
/*大图片尺寸*/
.lImage{
  width:750rpx;
  height: 1052rpx
}
 
/*小视频尺寸*/
.video{
  width:750rpx;
  height: 424rpx
}
 
/*整屏图尺寸*/
.aelImage{
  width:750rpx;
  height: 1476rpx
}

上面的代码仅仅是复现bug所用。left.png可以可以直接去掉，在第二页的siwper-item中，红色框以及黄色框会被swiper-item遮挡的？是我姿势不对，还是其他？测试图片仅仅用于测试。

2 回复

你好，麻烦具体描述问题流程，提供出现问题的具体机型、微信版本号、系统版本号，以及能复现问题的代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）

一样的问题，同求解答

回到顶部