小程序canvas無法被覆蓋問題的解決方式


使用場景:

點擊頁面中的按鈕時會彈出一個框覆蓋整個頁面,並在其中做一些操作

頁面中有一個用canvas繪制的二維碼圖片,可是這個圖片在彈框出現時層級過高會懸浮在彈框之上

但是:

試過了

1、用z-index提升外框的層級,但是不奏效,

2、嘗試使用cover-view但是那樣的話就無法使用輸入框,

3、使用wx-if,當彈框展示時,canvas隱藏,可是這樣的話二維碼就無法被再次渲染而導致此處出現一個

最后的解決方式:

利用一個變量查看是否展示彈框,

當彈框展示時使用類名:myCanvas2,在其中設置width和height為0

當彈框隱藏時使用類名:myCanvas1在其中設置width和height為想要的大小即可

<canvas  class="{{'yssImgUrl '+(canBox.isShow?'myCanvas2':'myCanvas1')}}" canvas-id="myQrcode"></canvas>

開心o( ̄▽ ̄)ブ


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM