頻道欄目
首頁 > 資訊 > 微信小程序 > 正文

微信小程序關于父子組件一些心得

19-03-08        來源:[db:作者]  
收藏   我要投稿
父子組件樣式的設置

1、 如何對父子組件設置flex布局

如果在小程序中對父組件設置 display:flex 或者 display:inline-flex 然后再對子組件最外層元素的class設置flex的樣式屬性會發現不會有效果。

比如在這個截圖中

父元素 .parent-box 是 display:flex 然后對子元素 .child-box 設置 flex、justify-content、align-content 等屬性會發現都沒有效果。

我們看截圖可以發現其實微信小程序渲染完后會對組件里面的內容再套一層組件名稱的標簽。所以如果要對子元素設置flex屬性的話應該對子元素使用小程序提供的:host選擇器。

父元素樣式

.parent-box{

display:flex;

}

復制代碼

子元素樣式

:host{

flex: 1;

}

復制代碼

2、根據不同條件渲染子組件根節點的樣式

比如組件在某些特殊場景不使用flex布局而是采用其他方式布局,我們希望同過某種方式來控制子組件根節點的樣式。但是微信小程序的:host選擇器似乎沒法做到這種需求。如果后面微信小程序的:host選擇器可以支持屬性選擇器也許可以做到。

這里沒有找到特別好的辦法,這里我說下兩種比較差的解決方法

· 在小程序自定義組件標簽其實相對于view標簽或者text標簽可以直接在標簽中使用style或者class的。就是利用標簽的style或者class動態去改變。

復制代碼

這里嘗試過在父組件和子組件去設置子組件的class都是沒有反應的,所以子組件class只能在Page的Wxss中去設置。

· 一種就是如果明確了子組件的標簽名稱我們可以在父組件的樣式中去設置不同的子組件樣式

父元素樣式

.parent{

display:flex;

}

.parent-box child{

flex:1;

}

.parent-box.column child{

flex-direction: column;

}

.parent-box.row child{

flex-direction: row;

}

復制代碼

不過這種方式也不太好,因為組件的是在Page的json可以隨意命名的,這種方法除非是團隊開發開始個人約定好了組件的名稱,不會隨意給組件起名的情況下。

這種方法甚至可以用CSS的選擇器控制某一個子組件單獨的樣式

父元素樣式

.parent-box child:first-child{

flex:1;

}

復制代碼

父元素獲取子元素WMXL

有些時候為了一些組件的擴展性我們會把他們拆成父子組件,又有些時候組件內有一些需要酷炫的樣式動畫我們可能需要在父組件內拿到子組件的節點信息去進行計算。這里我說下我用的方法。

1、使用 wx.createSelectorQuery().in()

在linked生命周期時會傳遞過來子組件的實例對象,在這個使用把wx.createSelectorQuery().in傳入子組件包裝成Promise插入數組。待要獲取子元素們的節點信息時調用。

父組件JS

Component({

data: {

childRectPromises:[]

},

relations: {

'/child': {

type: 'child',

linked(v) {

const p = ()=> new Promise((resolve,reject)=>{

const query = wx.createSelectorQuery().in(v)

query.select('.child-box').boundingClientRect(function(res){

resolve(res)

}).exec()

})

this.data.childRectPromises.push(p);

},

}

},

ready(){

Promise.all(this.data.childRectPromises.map(p=>p())).then(res=>{

/* 邏輯 */

})

}

})

復制代碼

2、使用 >>> 選擇器

如果用上面的方法如果有10個子元素,我們就要調用10次的 wx.createSelectorQuery().in().select()。怎么都感覺十分的消耗性能,如果可以使用selectAll一次性把全部子元素的節點信息給拿到就好了。這時我們就想可以不可以

wx.createSelectorQuery().in(父元素對象).selectAll(子元素節點)

復制代碼

經過我的測試,在組件已經渲染完畢有子元素的情況下,返回的是個空數組,說明這種寫法是不行的。哪還有什么辦法呢。

其實在微信小程序中 在selectAll/select中 提供了 >>> 這樣一個選擇器,這個選擇器可以在拿到頁面組件中對匹配到的節點。

我們只要 wx.createSelectorQuery().selectAll( 父組件 >>> 子元素節點 ) 像這么寫我們就可以一次輕松拿到全部子節點啦。

但是這里我們這么寫 wx.createSelectorQuery().selectAll( 父組件元素class >>> 子元素節點 )是沒有作用的,我的理解是,因為我們沒有在wx.createSelectorQuery()調用in方法就是相當于在Page中查找這些元素,而不是在組件內,父組件元素class是封裝在組件內的所以查找不到這個元素,也就返回了空數組。

相對于頁面,如果我們用組件的標簽名,就如上面所說的組件名可以隨意起名并不是很合適,這時我們就想要是知道父組件的某個class或者id就好了,知道父組件設置了什么class可能可能不太顯示,不過如果我們對標簽設置了id我們確可以從this從獲取到。

這時我們成功只用一次selectAll獲取到了父組件的子元素們。不過這么做有個缺點就是一定要設置id才行,不過為了性能優化我們可以從在父組件中做個判斷如果id為空則提示使用此組件需要設置id。

好了以上就是我在開發小程序中對父子組件的一些心得,如果大家有一些更好的辦法或者心得希望可以與我分享,謝謝各位。

贊賞

相關TAG標簽
上一篇:臺積電:絕大多數7nm客戶都會轉向6nm_IT新聞_博客園
下一篇:最后一頁
相關文章
圖文推薦

關于我們 | 聯系我們 | 廣告服務 | 投資合作 | 版權申明 | 在線幫助 | 網站地圖 | 作品發布 | Vip技術培訓 | 舉報中心

版權所有: 紅黑聯盟--致力于做實用的IT技術學習網站

免费的黄色网站