小程序 wxchart 折线图层级过高滑动遮档标题栏-Toy模板网

这篇具有很好参考价值的文章主要介绍了小程序 wxchart 折线图层级过高滑动遮档标题栏。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

问题描述：

标题栏背景色是渐变的，折线图用wxchart，滑动的时候标题栏被线图遮档。

分析：

wxcharts是使用了canvas，属性原来的组件，不是小程序自己的组件。

所以canvas层级权限是最高的，view不能盖在canvas上面。那么折线图就会盖在标题栏上面。

参考小程序：

cover-view | 微信开放文档
标题栏需要使用cover-view标签，

【cover-view标签可以盖在canvas上，但是里面只能放cover-view和cover-image 标签】。

加上z-index可以将层级提高

注意：

-只有最外层的cover-view标签设置定位和背景才可以盖住canvas。里面放的标签都不能盖住，所以要最外层的cover-view标签设置一个背景。

-cover-view不能设置渐变背景，可以采用将渐变背景做成一张图片放在下面。

最终wxml源码：

自定义标题栏加上cover-view, 加上纯净背景色，不用渐变。

渐变背景用了一个图片来实现：bg_bar.png文章来源地址https://www.toymoban.com/news/detail-607224.html

<cover-view style="height: {{nav_height}}px;background-color:#eeeeee;position: fixed;width: 750rpx;z-index: 1000;">

  <cover-view class="bar" style="height: {{nav_height}}px;width:750rpx;z-index:900;">
    <cover-image  class="tabbg" src="/images/index/bg_bar.png"></cover-image>
    <cover-image class="scan" bindtap="ScanQR" src="../../images/icon/saoyisao.png"
                 style="top: {{statusBarHeight+specialHeight+24}}rpx;"></cover-image>
    <cover-view class="navigationBarTitleText" style="top: {{statusBarHeight+specialHeight+50}}rpx;">首页</cover-view>
  </cover-view>
<view class="mt40 bcf br24 sevenDay">
  <view class="fz32b chart_title">7天走势图</view>
  <canvas canvas-id="areaCanvas" bindtouchstart="touchHandler"
          style="width:100%;height:248rpx;"></canvas>
</view>

到了这里，关于小程序 wxchart 折线图层级过高滑动遮档标题栏的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！