记一次Iphone11,在IOS13系统版本下自定义ActionSheet多次打开关闭后右侧和下方出现白色遮罩影响本来样式的问题

如题,记录一次问题解决,困扰我两天之久,最后终于解决

背景:一个加载信息的长列表,就普通长列表,没有用fixed,absolute之类的布局,筛选自定义了ActionSheet半屏菜单,半屏菜单fixed设置了遮罩,然后内容部分高一层级的内容fixed底部,设置了定高,有title区和底部确认btn区,中间内容滚动可见,提测后,iphone11机型ios13版本下,底层列表数据很少时(这个是后来试了很多次必现的条件才发现的)半屏菜单右侧出现白色竖条,底部也有白色遮挡,如下图,正常的应该半屏菜单显示筛选项内容

 解决方案:

        一开始一直以为是组件本身的问题,一直在排查自定义的ActionSheet本身的布局,总是在想是不是fixed在ios下的类似的布局坑(之前fixed布局滚动内容遇到过很多坑);

       然后本地调试的时候发现,当白色条出现的时候底部内容区的宽度是是看起来缩短了一下子的,看起来就像是右侧白色区域挤占了本来内容区的宽度,咦,于是我在本身的内容列表最外层加了width:100vw,然后右侧白条没有了。

        底部还是没有内容,刚开始以为是z-index层级的问题,调了一下并没有用,然后想到了刚才横向的修改,是不是内容区域过短,导致遮挡了呢,于是给长列表加了min-height:100vh,问题解决了。

       但是其实我还是非常疑惑的,我的ActionSheet已经是fixed和底部内容不在一个层级了,在这个机型下还会受到底部内容区域的影响,就很奇怪,特此记录一下,也许积累多了会实现量变到质变吧~

        仅个人总结,欢迎批评指正~

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是使用蒙版实现10个连续的点击指示的示例代码: HTML代码: ``` <div class="container"> <div class="mask mask-1"></div> <div class="mask mask-2"></div> <div class="mask mask-3"></div> <div class="mask mask-4"></div> <div class="mask mask-5"></div> <div class="mask mask-6"></div> <div class="mask mask-7"></div> <div class="mask mask-8"></div> <div class="mask mask-9"></div> <div class="mask mask-10"></div> <div class="content"> <button class="button">点击开始</button> </div> </div> ``` CSS代码: ``` .container { position: relative; width: 500px; height: 500px; } .mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: none; } .mask.active { display: block; } .content { position: relative; z-index: 1; } .button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; } ``` JavaScript代码: ``` var masks = document.querySelectorAll('.mask'); var button = document.querySelector('.button'); var currentMask = 0; button.addEventListener('click', function() { masks[currentMask].classList.remove('active'); currentMask++; if (currentMask >= masks.length) { currentMask = 0; } masks[currentMask].classList.add('active'); }); ``` 这段代码中,我们使用了10个遮罩层(mask-1到mask-10),并将它们的display属性初始设置为none,即隐藏。同时,在CSS中,我们为这些遮罩层设置了一个半透明的背景色,并使用了一个.active类来控制遮罩层的显示。在JavaScript中,我们使用querySelectorAll方法获取到所有的遮罩层,并将它们存储在masks变量中。我们还获取到了一个按钮元素,并为它绑定了一个click事件。在click事件中,我们先将当前遮罩层隐藏,然后切换到下一个遮罩层,并将其显示出来。如果已经显示了最后一个遮罩层,则回到第一个遮罩层继续循环。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值