解决小程序中 cover-view无法盖住canvas的问题，仅安卓真机出现

最新推荐文章于 2022-04-14 14:41:28 发布
最新推荐文章于 2022-04-14 14:41:28 发布
阅读量799 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/magicc/p/10178355.html
版权

原因在于系统页面渲染的差异，在安卓中页面dom的渲染并不是完成按照上下顺序来的，

有可能出现写在后面的dom被先渲染出来，因此会随机出现能盖住、不能盖住的情况，很诡异是不是？

开发者工具中并非真机，只是模拟显示，调整时显示正常不代表真机中正常

 

解决方式很简单：

将cover-view的渲染延迟一些，例如设定500ms后显示

 

此问题在页面调用echarts时出现，而echarts用的是canvas实现，希望对你有帮助！

转载于:https://www.cnblogs.com/magicc/p/10178355.html

weixin_30564785
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序Echarts覆盖正常组件问题解决
01-03
最近公司的项目中需要在小程序内使用echarts组件来展示数据，同时因为使用了自定义导航栏以及蒙版层，导致Echarts图形覆盖于所有组件的上方，不符合设计要求。        尝试解决的思路：        z-index：Echarts使用的是微信原生canvas，优先级高，z-index完全无效。        cover-view：因为page中含有一些如input之类的无法与cover-view进行嵌套使用的元素，故cover-view也无法奏效。 wx.canvasToTempFilePath：wx.canvasToTempFilePath官方文档        思路是等待画图完
微信小程序canvas编辑器（真机可用）
03-15
免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。
微信小程序ec-canvas
03-10
解决了不能识别颜色的问题报错
微信小程序 uni-app wxml-to-canvas 小程序内通过静态模板和样式绘制 canvas ，导出图片，可用于生成分
09-01
wxml-to-canvas 小程序内通过静态模板和样式绘制 canvas ，导出图片，可用于生成分享图等场景
在使用组件cover-view遇到的那些坑
mengmeng1_的博客
03-02 5048
view在canvas上无法正常显示。 在canvas上使用view来添加图片和弹框时，发现图片以及弹框在canvas的下面，不能正常显示图片。 查看文档发现canvas、map、video等原生组件使用的是native实现的，默认显示在小程序的最上层，所以就把view换成cover-view或者cover-image。 使用view效果： <view class = "sublin...
小程序cover-view 无法覆盖canvas 不显示
qq_30989569的博客
07-13 1625
怎么能设计出这种东西 cover-view只支持嵌套 cover-view、cover-image、button（模拟器没问题，真机不可用，这是真的坑） 所以有覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher的需求，其他开源组件基本都不可用，全部需要自己写，而且还只能用这三个实现cover-view、cover-image、button cover-view上面使用相对定位，当video标签大小发生变化的时候，cover-view上面的
cover-view覆盖canvas
苏苏就是小苏苏的博客
07-23 1820
1.实现效果 2.实现原理 https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html 覆盖在原生组件之上的文本视图。 目前原生组件均已支持同层渲染，建议使用 view 替代。可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher 只支持嵌套 cover-view、cover-image，可在 cover-view 中使用 button。组件属性的长度单位
Android View遮挡问题解决方案
Android的专栏
03-20 3215
以GridView为例 重载GridView 实现将指定View置顶，以免放大时被其他View遮挡，其他布局也可类似实现 方案一： package com.example.gridview; import android.content.Context; import android.graphics.Canvas; import androi
微信小程序canvas层级过高，遮住弹窗解决方法
double徐
07-24 2万+
页面canvas图层遮住弹出框，导致弹出框无法点击且样式存在问题 因为canvas组件是由客户端创建的原生组件，原生组件层级是最高的，所以页面中的其他组件无论设置 z-index 为多少都无法盖在原生组件上。 想试着用cover-view组件，能覆盖canvas，map，video，camera等原生组件。但是也有一定的限制。比如：cover-view中只支持嵌套cover-view、cove...
微信小程序canvas蒙层遮盖问题
zhiyan1990的专栏
04-14 2515
最近做了两个小程序的项目，使用了阿里的Antv-F2进行图表绘制 页面调用如下： <view class="echart-wrapper"> <ff-canvas class="f2-canvas" ref="ffCanvasRef" id="mychart" canvas-id="f2-canvas" :onInit="onInitChart" :opts="chartOpti
解决微信小程序scroll-view组件无横向滚动的问题
10-15
主要介绍了微信小程序scroll-view组件无横向滚动的解决方法,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
微信小程序中canvas组件无法被覆盖的解决思路
04-12 4857
微信小程序官方指明了原生组件设置z—index属性是无效的今天遇见了一个需求是想要在canvas图案上弹出一个接收用户输入的信息的消息框。显然直接调节是没有任何效果的。无论如何canvas都会遮盖所有内容。我的解决思路 方法1.官方提供了cover-view和cover-img用来覆盖原生组件。但是这两个标签内不能嵌套别的标签。方...
微信小程序canvas组件层级最高问题解决方案
热门推荐
liya_nan的博客
08-24 4万+
最近产品新提了一个需求，在canvas页面上实现一个弹框。微信小程序文档中有提供cover-view组件，能覆盖canvas，map，video，camera等原生组件。但是也有一定的限制。比如：cover-view中只支持嵌套cover-view、cover-image，button。不可以使用input组件，这与我的需求不相符合，所以只能另辟蹊径。 下面来看一下原型图： 实现过程中遇到...
解决cover-view在安卓机上盖不住原生组件的问题
SAKURE2210866448的博客
03-31 1842
起因是公司需要做的小程序，需要一个自定义的导航栏，类似于这样： 由于使用的原生的组件canvas,在真机测试的时候，出现了菜单无法遮盖canvas的情况。如下图： 查询资料了解到 ，是因为原生组件层级的原因。 通过使用cover-view解决了以上问题。 但是安卓机真机测试时发现，即使使用了cover-view依然无法覆盖。 查阅资料发现，原因在于系统页面渲染的差异，在安卓中页面dom的渲染并不是...
小程序cover-view无法盖住canvas 层级太高
qq_30989569的博客
07-13 597
<ec-canvasforce-use-old-canvas="{{true}}"style="width:100%;height:400rpx;"id="mychart-one"canvas-id="mychart-pie"ec="{{ecMap}}"></ec-canvas> 设置force-use-old-canvas="{{true}}"
微信小程序canvas层级太高导致覆盖掉弹窗等组件的问题
棠樾的博客
03-04 4261
问题：在微信小程序中，当使用canvas生成二维码的时候，二维码图层在最上面，会挡住弹框的内容。 解决方法就是：在生成二维码的同时，生成本地图片链接，当弹框出现的时候用本地图片替换canvas。这样就完美解决了canvas图层最高的问题。 // 生成二维码 generateQrCode(params) { const query = uni.createSelectorQuery().in(this); query .
微信小程序cover-view安卓手机不能覆盖遮住canvas的BUG重现
weixin_30696427的博客
10-08 489
首先是wxml代码: <view class="canvasContainer clearfix"> <!-- 第一个 --> <view class='progress_box' style='height:{{canvasW + 40}}px;width:{{canvasW}}px;' wx:for="{{canvasData}}" ...
您说错了，小程序中canvas的层级高于image，可通过cover-view或cover-image实现，请修改代码
最新发布
06-08
非常抱歉，我的回答有误。在小程序中，`canvas`的层级确实是高于`image`的，可以通过使用`cover-view`或`cover-image`组件实现将`image`覆盖在`canvas`之上。以下是修改后的示例代码： ```html <cover-view style="position: relative; width: 100%; height: 100%;"> <canvas canvas-id="myCanvas" style="position: absolute; left: 0; top: 0; width: 100%; height: 100%;"></canvas> <cover-image src="图片地址" style="position: absolute; left: 0; top: 0; width: 100%; height: 100%;"></cover-image> </cover-view> ``` 在上述代码中，使用了`cover-view`将`canvas`和`cover-image`组合在一起，同时使用`position: absolute`属性使它们可以定位到相同的位置。`canvas`的`z-index`默认为`auto`，而`cover-image`的默认`z-index`值是`99`，所以`cover-image`会被覆盖在`canvas`之上。 在js文件中获取canvas的上下文（context），并在canvas上绘制其它图形或文字： ```javascript const ctx = wx.createCanvasContext('myCanvas'); ctx.setFillStyle('red'); ctx.fillRect(10, 10, 50, 50); ctx.setFontSize(20); ctx.fillText('Hello World', 100, 100); ctx.draw(); ``` 注意：使用`cover-view`或`cover-image`会增加页面的渲染层级，可能会影响性能。如果场景允许，建议使用`image`标签将图片绘制到`canvas`上。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值