小程式當中cover-view和原生元件的坑
阿新 • • 發佈:2018-12-21
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> //對號