扫描小程序码分享
- 在scroll-view组件下的view使用fixed布局,设置css如下:
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
width:100%;
height:100%; z-index:99999;
background:rgba(0,0,0,0.5);
- 预期表现:阴影层覆盖整个手机屏幕,置于最高层级。
bug:但是现在阴影层只有当前组件区域的大小,而非手机屏幕大小。
(只有ios真机存在问题)
3 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
楼主解决了没?我也遇到同样的问题...
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
有可能是组件的外部元素带有 transform:traslate3d 等使fixed 定位失效的属性,导致 fixed 定位不再相对与视口。搜一下 fixed 定位失效,排查一下
嗯嗯,是因为在scroll-view里引起的失效
微软大牛来了啊,测试是没问题的,
wxml:
<view class='cover'></view>
<view class='intro'>内容</view>
wxss:
.intro {
margin: 30px;
text-align: center;
}
.cover {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 99999;
background: rgba(0, 0, 0, 0.5);
关键看你的代码
现在是这样需要在组件里面使用这个,意思是这个弹窗是一个组件A,然后这个组件A被引入另一个组件B。然后组件B被引入index.wxml.组件A的fixed就会失效。
排除业务逻辑,调试器里的wxml就有完整的wxml代码及相关的样式,这里其实就是提供复现的代码
排查了一下,应该是楼上说的那个外部引起的失效问题。scroll-view里失效的
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
楼主解决了没?我也遇到同样的问题...
有可能是组件的外部元素带有 transform:traslate3d 等使fixed 定位失效的属性,导致 fixed 定位不再相对与视口。搜一下 fixed 定位失效,排查一下
嗯嗯,是因为在scroll-view里引起的失效
微软大牛来了啊,测试是没问题的,
wxml:
<view class='cover'></view>
<view class='intro'>内容</view>
wxss:
.intro {
margin: 30px;
text-align: center;
}
.cover {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 99999;
background: rgba(0, 0, 0, 0.5);
}
关键看你的代码
现在是这样需要在组件里面使用这个,意思是这个弹窗是一个组件A,然后这个组件A被引入另一个组件B。然后组件B被引入index.wxml.组件A的fixed就会失效。
排除业务逻辑,调试器里的wxml就有完整的wxml代码及相关的样式,这里其实就是提供复现的代码
排查了一下,应该是楼上说的那个外部引起的失效问题。scroll-view里失效的