問(wèn)題發(fā)現(xiàn)
在小程序開(kāi)發(fā)中需要上傳圖片進(jìn)行裁剪，在實(shí)際真機(jī)調(diào)試中發(fā)現(xiàn)canvas層遮擋住了生成圖片的按鈕。
問(wèn)題代碼
<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>
真機(jī)調(diào)試
生成、重選的按鈕有時(shí)會(huì)被canvas繪制的圖形遮住，根本不能點(diǎn)擊觸發(fā)選中事件。
問(wèn)題分析
1、canvas是小程序開(kāi)發(fā)中的繪圖工具，可以繪制圖形、渲染圖形和動(dòng)畫(huà)，故很多的情況下我們都用它來(lái)進(jìn)行業(yè)務(wù)開(kāi)發(fā)；
2、canvas組件是由客戶端創(chuàng)建的原生組件,原生組件層級(jí)是最高的,所以頁(yè)面中的其他組件無(wú)論設(shè)置 z-index 為多少都無(wú)法蓋在原生組件上；
3、cover-view組件是覆蓋在原生組件之上的文本視圖，可覆蓋的原生組件包括map、video、canvas、camera、live-player、live-pusher，只支持嵌套cover-view、cover-image，可在cover-view中使用button。
問(wèn)題解決
對(duì)于該問(wèn)題的發(fā)生我們可以用兩種方案：
1、不使用canvas渲染圖片，直接就能夠避免原生組件的最高層級(jí)問(wèn)題，但是我們需要用臨時(shí)圖片來(lái)代替進(jìn)行回顯；
2、使用cover-view組件，cover-view組件是覆蓋在原生組件之上的文本視圖，雖然有一定的使用限制但是我們的按鈕button剛剛好在范圍之內(nèi)。
綜上所述我們本次直接使用cover-view進(jìn)行改造。
改造代碼
<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解決兼容安卓機(jī)失效問(wèn)題
.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;
}
效果展示
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-717856.html
無(wú)論圖片有好長(zhǎng)按鈕都在最上層，問(wèn)題完美解決。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-717856.html
到了這里，關(guān)于小程序canvas層級(jí)過(guò)高真機(jī)遮擋組件的解決辦法的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
