- 当前 Bug 的表现
- 希望在<camera>标签上,做透视变换,使用了perspective这个参数,在PC模拟器上没问题,在手机上就cover-view就出问题了
- 最简复现 Demo
js:
IconList: [
{ x: 10, y: 0 },
{ x: 10, y: -100 },
{ x: 10, y: -200 },
{ x: 10, y: -300 },
{ x: 10, y: -400 },
{ x: 10, y: -500 },
{ x: 10, y: -600 },
{ x: 10, y: -700 },
{ x: 10, y: -800 },
{ x: 10, y: -900 },
],
wxml:
<camera device-position="back" flash="off" binderror="error" class="bg">
<cover-view class="div1">
<cover-view class="div2">
<block wx:for="{{navIconList}}">
<cover-view class='div_icon' style='top:{{item.y + 100}}rpx;left:{{item.x }}rpx'></cover-view>
</block>
</cover-view>
</cover-view>
</camera>
wxss:
.div1
{
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding:10px;
border: 1px solid black;
perspective:1000;
-webkit-perspective:150; /* Safari and Chrome */
}
.div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: rotateX(40deg);
-webkit-transform: rotateX(40deg); /* Safari and Chrome */
}
.div_icon{
position: absolute;
width: 40px;
height: 40px;
background-color: blueviolet;
z-index: 999;
}
https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html,按照教程提供下代码片段