小程序canvas层级过高真机遮挡组件的解决办法

这篇具有很好参考价值的文章主要介绍了小程序canvas层级过高真机遮挡组件的解决办法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

问题发现

在小程序开发中需要上传图片进行裁剪,在实际真机调试中发现canvas层遮挡住了生成图片的按钮。
问题代码

<import src="../we-cropper/we-cropper.wxml"></import>
<view class="cropper-wrapper">
    <template is="we-cropper" data="{{...cropperOpt}}"></template>
    <view class="cropper-buttons">
        <view bindtap="uploadTap" class="upload">
          重选图片
        </view>
        <view bindtap="getCropperImage" class="getCropperImage">
          生成图片
        </view>
    </view>
</view>

真机调试

小程序canvas层级过高真机遮挡组件的解决办法,故障排查,开发工具,小程序,canvas

生成、重选的按钮有时会被canvas绘制的图形遮住,根本不能点击触发选中事件。

问题分析

1、canvas是小程序开发中的绘图工具,可以绘制图形、渲染图形和动画,故很多的情况下我们都用它来进行业务开发;
2、canvas组件是由客户端创建的原生组件,原生组件层级是最高的,所以页面中的其他组件无论设置 z-index 为多少都无法盖在原生组件上;
3、cover-view组件是覆盖在原生组件之上的文本视图,可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher,只支持嵌套cover-view、cover-image,可在cover-view中使用button。

问题解决

对于该问题的发生我们可以用两种方案:

1、不使用canvas渲染图片,直接就能够避免原生组件的最高层级问题,但是我们需要用临时图片来代替进行回显;
2、使用cover-view组件,cover-view组件是覆盖在原生组件之上的文本视图,虽然有一定的使用限制但是我们的按钮button刚刚好在范围之内。

综上所述我们本次直接使用cover-view进行改造。

改造代码

<import src="../we-cropper/we-cropper.wxml"></import>
<view class="cropper-wrapper">
    <template is="we-cropper" data="{{...cropperOpt}}"></template>
    <cover-view class="cropper-buttons">
        <cover-view bindtap="uploadTap" class="upload">
          重选图片
        </cover-view>
        <cover-view bindtap="getCropperImage" class="getCropperImage">
          生成图片
        </cover-view>
    </cover-view>
</view>

css样式增加z-index解决兼容安卓机失效问题

.cropper-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    line-height: 50px;
    z-index: 9999;
}

效果展示

小程序canvas层级过高真机遮挡组件的解决办法,故障排查,开发工具,小程序,canvas

无论图片有好长按钮都在最上层,问题完美解决。文章来源地址https://www.toymoban.com/news/detail-717856.html

到了这里,关于小程序canvas层级过高真机遮挡组件的解决办法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 关于uniapp小程序内置canvas标签层级过高,覆盖其他标签问题

    uniapp 原因:是因为canvas是原生组件,而uniapp的 view、text 等标签相当于二次封装过的,给予z-index也是不生效的,微信开发者工具没有问题,但真机测试会爆这个雷 恰巧碰上一个需求需要一个canvas生成图片放在页面,点击按钮后生成一个二维码模态框,二维码也是canvas生成图

    2024年02月12日
    浏览(59)
  • 微信小程序canvas层级太高,与其他非原生组件层级冲突

     官网已经提出新版本以支持同层渲染,但是实际项目中层级还是冲突的。  最后在文档中找到这样一段话,用真机打开,层级就正常了 。所以建议大家,多使用真机调试去测试!!!!

    2024年02月11日
    浏览(45)
  • 小程序ucharts层级过高如何解决

    为什么canvas组件总是会在最上层? 由于canvas组件是原生组件,原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上 在页面出现点击事件,存在弹框,ucharts的图层会会出现在弹框上层,ucharts的图层事件会超过弹框事件,导致样式出

    2024年02月12日
    浏览(40)
  • 解决微信小程序Echarts图表层级过高的方案

    在微信小程序中使用Echarts图表时,有时会遇到图表层级过高的问题。这可能导致图表无法正常显示或部分内容被遮挡。本文将介绍一种解决方案,通过修改Echarts图表的样式和配置,可以有效解决这个问题。 解决方案如下: 检查图表容器的样式 首先,我们需要检查图表容器

    2024年02月03日
    浏览(44)
  • video视频背景层级过高解决方案

    uni-app开发的项目中使用video标签设置视频做为页面背景,video标签层级过高,页面中内容不展示。 官方提供了三种办法: cover-这个标签使用说明:这个标签APP端它不支持嵌套,就是就算这种都是不支持的,所以如果你的页面比较复杂的话这种方法是不行的,页面元素简单的话

    2024年02月03日
    浏览(38)
  • 小程序 wxchart 折线图层级过高滑动遮档标题栏

    问题描述 : 标题栏背景色是渐变的,折线图用wxchart,滑动的时候标题栏被线图遮档。 分析: wxcharts是使用了canvas, 属性原来的组件,不是小程序自己的组件。 所以canvas层级权限是最高的,view不能盖在canvas上面。那么折线图就会盖在标题栏上面。 参考小程序: cover-view

    2024年02月15日
    浏览(59)
  • canvas层级太高问题的解决办法

    因为canvas组件是由客户端创建的原生组件,原生组件层级是最高的,所以页面中的其他组件无论设置 z-index 为多少都无法盖在原生组件上。 1.html页面的处理 加上一个判断wx:if=“{{!canvasImg}}” 2.js页面的处理 (1)data中声明一个变量canvasImg (2)新增方法:处理canvas转化为图片

    2024年02月12日
    浏览(34)
  • uniapp-app视频层级过高问题

    使用v-html动态渲染 参考:uniapp video app端层级过高的问题,滑动渲染问题。_video在app端层级过高-CSDN博客 有想过使用原生,但是太麻烦了,然后换成了弹窗播放,但是动态的src播放失败,错误提示: chunk-vendors.js:14882 Uncaught (in promise) DOMException: The element has no supported sources.  

    2024年01月21日
    浏览(62)
  • 【uniapp】 video视频层级、遮挡其他弹窗或顶部导航 使用nvue覆盖

    uniapp 顶部导航和弹窗被video遮挡解决办法 全部代码 请前往dcloud 视频播放器 解决video视频遮挡顶部导航、 遮挡分享弹窗 组件层级 下载 话不多说 直接来干货 示例图片: 第一步:配置 subNVues 第二步:分别在index文件夹下建立三个文件分别为:index.vue 、drawer.nvue、subnvue.nvue文件

    2024年02月12日
    浏览(56)
  • UGUI 使用 UIParticle 实现 UI 上显示 Particle System 以及 层级遮挡 和 Mask

    UIParticle git 地址 打开上面地址,关于UIParticle 如何使用讲解非常详细 如何安装到Unity 项目?找到 Installation 部分,几种安装方式 下面是 Using Git 方式 关闭Unity,打开 Unity 项目目录找到 Packages/manifest.json 添加如下代码 然后用Unity 打开项目,将自动开始导入并安装,如果弹窗提

    2024年02月07日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包