1. 程式人生 > >小程式當中cover-view和原生元件的坑

小程式當中cover-view和原生元件的坑

cover-view當中,子元素position之後,不能通過z-index調整上下層關係。 測試發現只有調整程式碼當中節點的位置。節點在下面的比節點在上面的層級高....

觸坑過程...

是這樣的一個效果圖,內容部分是canvas繪製的。 底部選單需要懸浮到canvas上面,只能用cover-view實現。

 這兩個東西,按照需求是可以滑動的,但是cover-view裡面不允許放swiper,只能自己寫輪播事件了。  

官方說cover-view不能用background-image,於是遮罩和對號只能用cover-view和cover-images,

<cover-image class='iconYes' src="/images/iconYes.png"></cover-image>    //對號
<cover-view class='mask'></cover-view>                                   //遮罩
<cover-image class='bgImg' src="{{item}}"></cover-image>                 //圖片

然後設定position和z-index之後用手機預覽看不到效果。

通過遠端除錯,找到這兩個節點,位置也正確,但就是無法顯示出來,但是把背景圖片節點註釋掉就可以看到遮罩層,但還是看不到對號層。

這期間,模擬器的效果一直都是正確的...  通過不停的修改,和不停的手機掃碼,找到是層級的問題。 於是調整節點位置後實現效果。

節點越在下面,層級越高。調整如下

<cover-image class='bgImg' src="{{item}}"></cover-image>                 //圖片
<cover-view class='mask'></cover-view>                                   //遮罩
<cover-image class='iconYes' src="/images/iconYes.png"></cover-image>    //對號