<view class="switch-block" :class="{'switch-block-show': isSwitchShow}">
<image class="icon" :src="prodImgHttp + '/switch.png'" mode="widthFix" @tap="handleSwitch"></image><view class="btn" @tap="toggleOrientation">{{isPortrait?'切换横屏':'切换竖屏'}}</view>
</view>
<view class="item">
<view class="ctitle">
<text>身高曲线图</text>
</view>
<canvas style="z-index: 10;" :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }" canvas-id="column" id="column" class="charts" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"/>
</view>
.item {
margin-bottom: 30px;
width: 100%;
position: relative;
z-index: 999;
.ctitle {
font-size: 17px;
font-weight: 600;
padding: 15px;
position: relative;
::after {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 19px;
background-color: #FC7C23;
}
}
}
.switch-block {
display: flex;
align-items: center;
position: fixed;
right: -78px;
top: 30%;
z-index: 1000;
transition: right ease 0.6s;
background-color: #FC7C23;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding: 8px 10px;
.icon {
width: 30px;
}
.btn {
font-size: 16px;
font-weight: 500;
color: #ffffff;
margin-left: 10px;
}
}
在模拟器上显示没问题,真机上显示不行,是为什么呢?
两个都有父元素包裹,且父元素都设置了z-index,为什么switch-block覆盖不了item呢?
