收藏
回答

swiper-item中定义absolute元素,安卓端该元素被swiper-item遮挡

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug swiper 微信安卓客户端 7.0.9 2.9.4

<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遮挡的?是我姿势不对,还是其他? 测试图片仅仅用于测试。

最后一次编辑于  2019-12-09
回答关注问题邀请回答
收藏

2 个回答

登录 后发表内容
问题标签