解决wxcharts层级问题，使用wxcharts插件的按钮被盖住的解决办法。

大风刮来的

已于 2022-02-17 10:25:15 修改

阅读量437

点赞数 1

分类专栏： html css 文章标签： html css 前端

于 2022-02-17 10:24:51 首次发布

本文链接：https://blog.csdn.net/weixin_48669322/article/details/122977548

版权

html 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

解决wxcharts层级问题，使用wxcharts插件的按钮被盖住的解决办法。

wxcharts是使用了canvas画板。但是canvas画板的层级权限是最高的，view不能盖在canvas上面。那么折线图就会盖在我们设置的按钮上面。
想解决这个需要使用cover-view标签，放在canvas标签外即可。【cover-view标签可以盖在canvas上，但是里面只能放cover-view和cover-image 标签】。
加上z-index可以将层级提高
注意： -只有最外层的cover-view标签设置定位和背景才可以盖住canvas。里面放的标签都不能盖住，所以要最外层的cover-view标签设置一个背景。
-cover-view不能设置渐变背景，可以采用将渐变背景做成一张图片放在下面。

 <!-- 使用cover-view盖住wxcharts图表 -->
  <cover-view style="position: fixed; top: 0;z-index: 899; width: 100%;height: 357rpx;"> 内容</cover-view>
  <!-- 使用wxcharts图表 -->
<canvas canvas-id="lineCanvas2" disable-scroll="true" class="canvas" bindtouchstart="line1touchHandler" style="height:450rpx; width: 720rpx;"></canvas>