小程序 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

复制代码
<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>
相关推荐
sunbyte1 小时前
Tailwind CSS 初学者入门指南:项目集成,主要变更内容!
前端·css
可爱的秋秋啊2 小时前
vue3,element ui框架中为el-table表格实现自动滚动,并实现表头汇总数据
前端·vue.js·笔记·elementui
一夜枫林2 小时前
uniapp自定义拖拽排列
前端·javascript·uni-app
良艺呐^O^2 小时前
uniapp实现app自动更新
开发语言·javascript·uni-app
IT瘾君4 小时前
JavaWeb:Html&Css
前端·html
264玫瑰资源库4 小时前
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)
java·开发语言·前端·游戏
喝拿铁写前端5 小时前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED5 小时前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪5 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程5 小时前
如何测试短信接口
java·服务器·前端