swiper-item中定义absolute元素,安卓端该元素被swiper-item遮挡
< 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 : 100 vh; overflow : hidden ; position : relative ; } image{ width : 100% ; } /*小轮播尺寸*/ .mSwipe{ width : 750 rpx; height : 424 rpx } /*大轮播尺寸*/ .lSwipe{ width : 750 rpx; height : 1052 rpx } /*小图片尺寸*/ .mImage{ width : 750 rpx; height : 424 rpx } /*大图片尺寸*/ .lImage{ width : 750 rpx; height : 1052 rpx } /*小视频尺寸*/ .video{ width : 750 rpx; height : 424 rpx } /*整屏图尺寸*/ .aelImage{ width : 750 rpx; height : 1476 rpx } |
上面的代码仅仅是复现bug所用。left.png可以可以直接去掉,在第二页的siwper-item中,红色框以及黄色框会被swiper-item遮挡的?是我姿势不对,还是其他?测试图片仅仅用于测试。
2 回复
你好,麻烦具体描述问题流程,提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)