小程序當中多個原生組件顯示問題
最近在開發(fā)小程序的過程中。使用到小程序地圖組件，地圖全頁展示馍忽，在地圖上展示其他組件，其他組件可能不展示的問題燕差。
關于原生組件使用原則遭笋，使用微信小程序使用規(guī)則：
原生組件的使用限制
由于原生組件脫離在 WebView 渲染流程外，因此在使用時有以下限制：
原生組件的層級是最高的徒探，所以頁面中的其他組件無論設置 z-index 為多少瓦呼，都無法蓋在原生組件上。
后插入的原生組件可以覆蓋之前的原生組件测暗。
原生組件還無法在 <picker-view> 中使用央串。
基礎庫 2.4.4 以下版本，原生組件不支持在 <scroll-view>碗啄、<swiper>质和、<movable-view> 中使用。
部分CSS樣式無法應用于原生組件挫掏，例如：
無法對原生組件設置 CSS 動畫
無法定義原生組件為 position: fixed
不能在父級節(jié)點使用 overflow: hidden 來裁剪原生組件的顯示區(qū)域
原生組件的事件監(jiān)聽不能使用 bind:eventname 的寫法侦另，只支持 bindeventname。原生組件也不支持 catch 和 capture 的事件綁定方式尉共。
在iOS下褒傅，原生組件暫時不支持觸摸相關事件。
原生組件會遮擋 vConsole 彈出的調(diào)試面板袄友。
在工具上殿托，原生組件是用web組件模擬的，因此很多情況并不能很好的還原真機的表現(xiàn)剧蚣，建議開發(fā)者在使用到原生組件時盡量在真機上進行調(diào)試支竹。
在這兒解釋下以下組件作用旋廷。
Mapz為地圖組件，頁面全屏展示地圖組件礼搁。
Pointer地圖上彈窗顯示饶碘，默認隱藏
ShareComponent分享頁面入口按鈕，該頁面為倒計時
Notification跑馬燈信息展示
isDebug 控制頁面是否顯示地圖組件
正確代碼展示
render() {
// jsx eslint
const { enlData, isOpened } = this
const isDebug = this.debugVersion
return (
<View className='index'>
{
isDebug ? <Version></Version> : (
<Block>
<Mapz onClickMarker={this.onClickMarker.bind(this)} ></Mapz>
<CoverView className='push_enl' onClick={this.onNavigate.bind(this)}>
<CoverImage src={enl}></CoverImage>
</CoverView>
<Pointer elData={enlData} onClose={this.onPointerClose.bind(this)} isOpened={isOpened} onConfim={this.onConfim.bind(this)}></Pointer>
<ShareComponent></ShareComponent>
{/* <Notification className='center'></Notification> */}
</Block>
)
}
</View>
)
}
視圖展示：
image
上面的代碼馒吴，將地圖與地圖上顯示的浮層放在一起扎运，顯示無問題.....但是，如果將地圖層上的浮層與地圖組件分離開布局饮戳，如以下代碼
render () {
// jsx eslint
const { enlData, isOpened } = this
const isDebug = this.debugVersion
return (
<View className='index'>
{
isDebug?<Version></Version>:<Mapz onClickMarker={this.onClickMarker.bind(this)} ></Mapz>
}
{
!isDebug && <CoverView className='push_enl' onClick={this.onNavigate.bind(this)}>
<CoverImage src={enl}></CoverImage>
</CoverView>
}
<Pointer elData={enlData} onClose={this.onPointerClose.bind(this)} isOpened={isOpened} onConfim={this.onConfim.bind(this)}></Pointer>
<ShareComponent></ShareComponent>
<Notification className='center'></Notification>
</View>
)
}
同之前不同的是豪治，isDebug將根據(jù)情況顯示地圖組件與發(fā)紅包按鈕。其他組件直接展示扯罐。负拟。
在此時頁面展示如下：
小程序原生組件.png
現(xiàn)在Notification 與 shareComponent組件已經(jīng)消失不見了。歹河。掩浙。那么為什么會這樣呢？
根據(jù)實際問題反饋：出現(xiàn)這樣的問題原因在與启泣，Mapz的顯示是通過isdebug來決定的,而isDebug的值可能會通過setState進行改變造成重新渲染頁面涣脚。因此mapz可能會在其他組件之后渲染；在Mapz渲染之前寥茫，shareComponet組件已經(jīng)在Mapz組件之前渲染了遣蚀，所以導致shareComponent組件被Mapz組件所遮蓋的問題。因而得出以下結(jié)論：
原生組件的先后順序不是布局上的先后順序纱耻，而是渲染的先后順序芭梯；后渲染的組件將會覆蓋之前的組件與代碼布局邏輯上的出現(xiàn)先后無關
