使用ucharts绘制图表后在真机上出现无法正常滑动页面,滑动时只是绘制的canvas跟着滑动,并且因为层级过高会挡住底部的tabbar栏。
解决方案:使用官方提供的cover-view组件,在canvas所在的容器写一个同级的cover-view,宽高100% absolute定位覆盖在canvas所在容器。tabbar栏也改用cover-view和cover-image组件去写。
<view class="canvas-box">
<view class="canvas-title">转化分析</view>
<view class="qiun-charts" >
<canvas canvas-id="canvasRing" id="canvasRing" class="charts" ></canvas>
<!-- 新增下面的cover-view -->
<cover-view class="mark-box"></cover-view>
</view>
</view>
.qiun-charts {
width: 690rpx;
height: 450upx;
background-color: #FFFFFF;
position: relative;
.mark-box{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
}
cover-view和cover-image会比canvas的层级还高,所以此方法会导致原来的图表点击事件失效,像博主这样不考虑点击事件的可以这样解决。