上一篇：小程序?qū)W習(xí)筆記-2：NavigationBar和TabBar的使用
本篇內(nèi)容
* 微信小程序頁(yè)面布局中常使用的組件害驹，及注意事項(xiàng)
用到的組件主要有：
-
view
小程序中比較基礎(chǔ)的視圖容器呢燥，類似html中的div渐白。
可以在view屬性中設(shè)置關(guān)于按住該容器后的樣式及屬性。
-
swiper
滑塊視圖容器瘾蛋，有很多方便的配置绰沥，指路：小程序文檔：swiper。項(xiàng)目中用于首頁(yè)的影片海報(bào)輪播姑原。
其中只可放置swiper-item組件，否則會(huì)導(dǎo)致未定義的行為旦装。將輪播的內(nèi)容页衙，此處是圖片<img>組件摊滔，放入到swiper-item組件內(nèi)阴绢。
-
scroll-view
可滾動(dòng)視圖區(qū)域。要想只有該區(qū)域滾動(dòng)艰躺，縱向滾動(dòng)時(shí)需要在wxss中設(shè)置一個(gè)初始的高度呻袭，橫向滾動(dòng)不需要。否則超出頁(yè)面長(zhǎng)度之后是頁(yè)面滾動(dòng)腺兴。
enable-back-to-top設(shè)置為true后iOS點(diǎn)擊頂部狀態(tài)欄左电、安卓雙擊標(biāo)題欄時(shí)，滾動(dòng)條返回頂部页响，只支持豎向篓足。
感覺回到頂部這個(gè)功能不太明顯，想加一個(gè)回到頂部的懸浮按鈕闰蚕。
-
block
<block/> 并不是一個(gè)組件栈拖，它僅僅是一個(gè)包裝元素，不會(huì)在頁(yè)面中做任何渲染没陡，只接受控制屬性涩哟。所以在其上設(shè)置樣式不管用。
因?yàn)?wx:if 是一個(gè)控制屬性盼玄，需要將它添加到一個(gè)標(biāo)簽上贴彼。如果要一次性判斷多個(gè)組件標(biāo)簽，可以使用一個(gè) <block/> 標(biāo)簽將多個(gè)組件包裝起來(lái)埃儿，并在上邊使用 wx:if 控制屬性器仗。
-
navigator
頁(yè)面鏈接⊥基礎(chǔ)功能類似html5中的<a>精钮。
-
Navigation
Navigation是小程序的頂部導(dǎo)航組件暴心，當(dāng)頁(yè)面配置navigationStyle設(shè)置為custom的時(shí)候可以使用此組件替代原生導(dǎo)航欄。
-
navigation-bar
頁(yè)面導(dǎo)航條配置節(jié)點(diǎn)杂拨，用于指定導(dǎo)航欄的一些屬性专普。上一篇學(xué)習(xí)筆記
中已經(jīng)整理了使用方法。
-
input
input是一個(gè)原生組件弹沽。也就是由客戶端創(chuàng)建的原生組件檀夹，不是通過(guò)WebView渲染的。原生組件有一些樣式策橘、層級(jí)上的限制炸渡。
input組件僅在focus時(shí)表現(xiàn)為原生組件。
小程序的渲染層和邏輯層分別由2個(gè)線程管理：渲染層的界面使用了WebView 進(jìn)行渲染丽已；邏輯層采用JsCore線程運(yùn)行JS腳本蚌堵。一個(gè)小程序存在多個(gè)界面，所以渲染層存在多個(gè)WebView線程沛婴，這兩個(gè)線程的通信會(huì)經(jīng)由微信客戶端（下文中也會(huì)采用Native來(lái)代指微信客戶端）做中轉(zhuǎn)吼畏，邏輯層發(fā)送網(wǎng)絡(luò)請(qǐng)求也經(jīng)由Native轉(zhuǎn)發(fā)
-
template、import
WXML提供模板（template）嘁灯，可以在模板中定義代碼片段泻蚊，然后在不同的地方調(diào)用。
首先在pages/common路徑下新建一個(gè)wxml文件和wxss丑婿，用template模板把代碼片段包起來(lái)性雄，要給template設(shè)置name，用于引用羹奉。
//common-list.wxml
<template name="movie-list">
<text>{{ t1 }}</text>
</template>
然后在引用模板的文件中秒旋，通過(guò)import或者include引用模板，在template處指定名稱和數(shù)據(jù)
//search.wxml
<import src="../common/common-list.wxml"/>
...
<template is="movie-list" data="{{t1: 'hellowold'}}"/>
總結(jié)：
本篇學(xué)習(xí)記錄了小程序中常用組件的使用方法诀拭。
