使用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的层级还高,所以此方法会导致原来的图表点击事件失效,像博主这样不考虑点击事件的可以这样解决。