当前位置: 代码迷 >> 综合 >> 【小程序】ucharts、echarts图表影响页面滑动解决方案
  详细解决方案

【小程序】ucharts、echarts图表影响页面滑动解决方案

热度:67   发布时间:2023-11-15 17:07:35.0

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

  相关解决方案