收藏
回答

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

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
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 个回答

  • 社区技术运营专员-娇华
    社区技术运营专员-娇华
    2019-12-09

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

    2019-12-09
    赞同
    回复 8
    • 就这种程度了吗
      就这种程度了吗
      2019-12-09
      稍等,我这就提交相关数据,第一次提bug,考虑不到的地方,多多包涵。关于机型,我这里用M3X安卓机测试的。
      2019-12-09
      回复
    • 就这种程度了吗
      就这种程度了吗
      2019-12-09
      抱歉,微信开发者工具点分享报这个错误?
      2019-12-09
      回复
    • 就这种程度了吗
      就这种程度了吗
      2019-12-09
      您好,我现在要确定 是不是微信客服端的bug,你能帮我解决下吗?
      2019-12-09
      回复
    • 就这种程度了吗
      就这种程度了吗
      2019-12-09
      代码片段我创建不了,错误代码为-1,我不知道怎么回事?请问,您能否把我的代码复制粘贴到开发者工具,红色已经黄色会被遮挡,这就是我的问题?您还要我提供别的信息吗????
      2019-12-09
      回复
    • 社区技术运营专员-娇华
      社区技术运营专员-娇华
      2019-12-09回复就这种程度了吗
      代码片段无法分享的问题已知,会尽快修复,我复制粘贴下你的代码看看吧
      2019-12-09
      回复
    查看更多(3)
  • 松华
    松华
    2019-12-26

    一样的问题,同求解答

    2019-12-26
    赞同
    回复
登录 后发表内容
问题标签