问题描述 :
标题栏背景色是渐变的,折线图用wxchart,滑动的时候标题栏被线图遮档。
分析:
wxcharts是使用了canvas, 属性原来的组件,不是小程序自己的组件。
所以canvas层级权限是最高的,view不能盖在canvas上面。那么折线图就会盖在标题栏上面。
参考小程序:
标题栏需要使用cover-view标签,
【cover-view标签可以盖在canvas上,但是里面只能放cover-view和cover-image 标签】。
加上z-index可以将层级提高
注意:
-只有最外层的cover-view标签设置定位和背景才可以盖住canvas。里面放的标签都不能盖住,所以要最外层的cover-view标签设置一个背景。
-cover-view不能设置渐变背景,可以采用将渐变背景做成一张图片放在下面。
最终wxml源码:
自定义标题栏加上cover-view, 加上纯净背景色,不用渐变。
渐变背景用了一个图片来实现:bg_bar.png
<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>