北京模板网站建站,新手建站广告联盟赚钱,企业信息管理系统源码,wordpress 地图 注记文章目录 问题发现真机调试问题分析问题解决改造代码效果展示 问题发现
在小程序开发中需要上传图片进行裁剪#xff0c;在实际真机调试中发现canvas层遮挡住了生成图片的按钮。 问题代码
import src../we-cropper/we-cropper.wxml/import
… 文章目录 问题发现真机调试问题分析问题解决改造代码效果展示 问题发现
在小程序开发中需要上传图片进行裁剪在实际真机调试中发现canvas层遮挡住了生成图片的按钮。 问题代码
import src../we-cropper/we-cropper.wxml/import
view classcropper-wrappertemplate iswe-cropper data{{...cropperOpt}}/templateview classcropper-buttonsview bindtapuploadTap classupload重选图片/viewview bindtapgetCropperImage classgetCropperImage生成图片/view/view
/view真机调试 生成、重选的按钮有时会被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 classcropper-wrappertemplate iswe-cropper data{{...cropperOpt}}/templatecover-view classcropper-buttonscover-view bindtapuploadTap classupload重选图片/cover-viewcover-view bindtapgetCropperImage classgetCropperImage生成图片/cover-view/cover-view
/viewcss样式增加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;
}效果展示 无论图片有好长按钮都在最上层问题完美解决。
