3.1　視圖容器組件

視圖容器組件的主要作用就是“容器”，與按鈕、文字、進度條等組件不同，它主要由普通視圖、滑動視圖、拖動視圖等構(gòu)成，就像我們在畫圖時的一個個背景畫布。

3.1.1　視圖容器view

view是最基本的視圖容器，與前端的div標簽比較類似，自身沒有任何大小顏色屬性，通常作為一個基本容器存在。view的自帶屬性如表3.1所示。

【示例3-1】

（1）新建一個項目components，用于本節(jié)的代碼展示。

（2）清空index.wxml和index.js的代碼，并輸入以下代碼：

（3）運行代碼，首頁效果如圖3.1所示。在接下來的小節(jié)里，我們將通過點擊不同的按鈕進入到對應(yīng)的組件展示中。

（4）接下來新建一個頁面view，用來展示本小節(jié)的內(nèi)容，代碼如下：

運行效果如圖3.2所示。

【代碼解析】我們給parent-view設(shè)置了hover-class，在點擊的時候顏色會發(fā)生變化。另外，延長了hover-start-time和hover-stay-time的時間，讀者可以自行測試代碼。最后sub-view中的hover-stop-propagation設(shè)置為false，所以點擊中間白色部分是不會讓parent-view變色的，如果想傳遞點擊態(tài)，只需要改為true即可。

3.1.2　滾動視圖scroll-view

介紹完了基本的視圖容器，我們繼續(xù)來看滾動視圖容器——scroll-view。scroll-view的自帶屬性如表3.2所示。

【示例3-2】

由于scroll-view組件支持的屬性特別多且大多不常用，因此我們只進行基本功能的展示，代碼如下：

運行效果如圖3.3所示。

【代碼解析】scroll-view的應(yīng)用十分簡單，我們寫好標簽后，使用scroll-x、scroll-y標記出是橫向或縱向滾動，樣式方面需要設(shè)置寬、高等屬性，即可滿足大多數(shù)需求。

3.1.3　可移動視圖movable-view

在手機的使用中，拖動也是一種常見的操作。接下來我們展示一下如何使用可移動視圖容器——movable-view。movable-view的自帶屬性如表3.3所示。

【示例3-3】

使用movable-view組件進行拖動方塊的展示，代碼如下：

運行效果如圖3.4所示。

【代碼解析】這個組件的代碼比較少，我們只需要設(shè)置movable-area為背景板，并在里面創(chuàng)建一個movable-view即可進行拖動操作，拖動方向direction通常設(shè)置為all。movable-view必須在movable-area組件中，并且必須是直接子節(jié)點，否則不能移動。

3.1.4　覆蓋視圖cover-view

cover-view是可以覆蓋于原生組件之上的文本視圖容器，可覆蓋的原生組件包括map、video、canvas、camera、live-player、live-pusher，并且可以與cover-view和cover-image進行嵌套。cover-view的自帶屬性如表3.4所示。

cover-view的屬性也只有一個，不算是一個常用的組件。覆蓋功能使用CSS的position也可以達到同樣的效果，不過直接使用該功能也可以提高一些開發(fā)效率。

【示例3-4】

創(chuàng)建一個地圖組件，并使用cover-view進行覆蓋，代碼如下：

運行效果如圖3.5所示。

【代碼解析】在map組件內(nèi)設(shè)置cover-view，就相當于在一個畫布里面，坐標會回到左上角，接下來正常編寫自己要展示的內(nèi)容并設(shè)置樣式即可。

3.1.5　滑塊視圖swiper

swiper是滑塊視圖容器，一般可以用作輪播圖等效果。目前市面中的App通常都會在首頁頂部做一個輪播圖，所以該組件還是很常用的。swiper的自帶屬性如表3.5所示。

easing-function的默認值為default，還支持linear（線性動畫）、easeInCubic（緩入動畫）、easeOutCubic（緩出動畫）、easeInOutCubic（緩入緩出動畫），讀者可以根據(jù)喜好自行選擇。

【示例3-5】

swiper的屬性比較復(fù)雜，我們挑選幾個常用的來演示，代碼如下：

運行效果如圖3.6所示。

【代碼解析】swiper設(shè)置了自動滾動、顯示指示器、切換間隔、切換速度、動畫效果等屬性，這些都可以在表格中找到一一對應(yīng)的解釋。swiper-item是必須放在swiper中使用的，通常輪播圖中會放置一些圖片，為了方便演示，本例直接用ABC的文字進行替代。