4.2 視圖容器組件

視圖容器組件主要包含5種，如表4-2所示。

表4-2 視圖容器組件

4.2.1 view

view是靜態的視圖容器，通常用<view>和</view>標簽表示一個容器區域。需要注意的是，view容器本身沒有大小和顏色，需要由開發者自己進行樣式設置。

view對應的屬性如表4-3所示。

表4-3 view組件屬性

【例4-1】　視圖容器組件view的簡單應用

WXML（pages/demo01/view/view.wxml）文件代碼如下：

視頻講解

WXSS（pages/demo01/view/view.wxss）文件代碼如下：

運行效果如圖4-1所示。

圖4-1 視圖容器組件view的簡單應用

【代碼說明】

本示例在view.wxml中使用了兩組父子view容器嵌套效果，并在view.wxss文件中分別定義它們的class屬性值為view_parent和view_son。默認樣式效果相同，父容器均為淺藍色背景、寬100%、高300rpx；子容器均為淺黃色背景、寬50%、高150rpx；單擊態均設置為單擊后背景顏色更新為紅色效果。其中第2組子容器設置了hover-stop-propagation來阻止單擊態傳遞給祖先元素。

在圖4-1中，圖(a)為頁面初始效果，此時兩組案例效果完全相同；圖(b)和圖(c)分別為單擊第1、2組子容器的效果。由圖4-1可見第1組父子容器均變為紅色，而第2組僅有子容器變為紅色，因此hover-stop-propagation生效。

4.2.2 scroll-view

<scroll-view>是可滾動視圖區域，對應的屬性如表4-4所示。

表4-4 scroll-view組件屬性

【例4-2】　視圖容器組件scroll-view的簡單應用

WXML（pages/demo01/scroll-view/scroll-view.wxml）的代碼片段如下：

視頻講解

WXSS（pages/demo01/scroll-view/scroll-view.wxss）的代碼片段如下：

運行效果如圖4-2所示。

圖4-2 視圖容器組件scroll-view的簡單應用

【代碼說明】

本示例在scroll-view.wxml中設置了兩組<scroll-view>組件，分別使用屬性scroll-y和scroll-x定義其縱向和橫向滾動。在每組<scroll-view>內部均包含3個<view>用于標識第幾頁。

在圖4-2中，圖(a)為頁面初始效果，此時都顯示第一個<view>的內容；圖(b)為滾動過程，由該圖可見分別實現了縱向和橫向滾動效果。

4.2.3 swiper

<swiper>也稱為滑塊視圖容器，通常使用該組件制作幻燈片切換播放效果。<swiper>組件的可用屬性如表4-5所示。

表4-5 swiper組件屬性

從1.4.0開始，change事件返回的detail中包含一個source字段，表示導致變更的原因，可能值如下。

?　autoplay：自動播放導致swiper變化。

?　touch：用戶滑動引起swiper變化。

?　其他原因用空字符串表示。

例如：

<swiper indicator-dots autoplay></swiper>

上述代碼表示希望實現一個帶有指示點的滑塊視圖容器，并且需要自動播放。但是僅憑這一句代碼是不夠的，<swiper>標簽必須配合<swiper-item>組件一起使用，該組件才是用于切換的具體內容。

在<swiper-item>中可以包含文本或圖片，其寬／高默認為100%。需要注意的是，<swiper>組件中可以直接放置的只有<swiper-item>組件，否則會導致未定義的行為。

【例4-3】　視圖容器組件swiper的簡單應用

WXML（pages/demo01/swiper/swiper.wxml）的代碼片段如下：

視頻講解

WXSS（pages/demo01/swiper/swiper.wxss）的代碼片段如下：

運行效果如圖4-3所示。

圖4-3 視圖容器組件swiper的簡單應用

【代碼說明】

本示例在swiper.wxml中設置了一個可以自動播放的<swiper>組件，每隔6秒翻頁且翻頁動畫效果持續3秒完成。該組件內部包含了3組<swiper-item>，且在每組<swiper-item>中均使用<view>組件配合文本內容標記當前是第幾頁。在swiper.wxss中設置<swiper>和<swiper-item>的高度均為300rpx，其中<swiper-item>還外加30號字體、淺藍色背景以及行高300rpx的樣式效果。

在圖4-3中，圖(a)為頁面初始效果，此時默認顯示第1頁內容；圖(b)和圖(c)分別顯示第2、3頁內容，由該圖可見指示點會隨著翻頁發生變化。

4.2.4 movable-view

<movable-view>也稱為可移動視圖容器，該組件可以在頁面中拖拽滑動。注意，該組件不能獨立使用，必須放在<movable-area>組件中且是直接子節點，否則無效。

<movable-area>組件是<movable-view>的可移動區域范圍，其屬性如表4-6所示。

表4-6 movable-area組件屬性

<movable-view>組件的屬性如表4-7所示，該組件支持的最低版本為1.2.0。

表4-7 movable-view組件屬性

注意事項如下：

（1）movable-view必須設置width和height屬性，若不設置默認為10px。

（2）movable-view默認為絕對定位，top和left屬性為0px。

（3）當movable-view小于movable-area時，movable-view的移動范圍是在movable-area內。

（4）當movable-view大于movable-area時，movable-view的移動范圍必須包含movable-area（X軸方向和Y軸方向分開考慮）。

【例4-4】　視圖容器組件movable-view的簡單應用

WXML（pages/demo01/movable-view/movable-view.wxml）的代碼片段如下：

視頻講解

WXSS（pages/demo01/movable-view/movable-view.wxss）的代碼片段如下：

運行效果如圖4-4所示。

圖4-4 視圖容器組件movable-view的簡單應用

【代碼說明】

本示例包含了3組效果，即<movable-view>的尺寸在<movable-area>范圍內、<movable-view>的尺寸大于<movable-area>的范圍、<movable-view>的尺寸可縮放。在movable-view.wxss中設置<movable-area>統一樣式為寬／高均為150rpx、淺藍色背景；設置<movable-view>統一樣式為紅色背景，且第1組和第3組中的<movable-view>寬／高均為50rpx、第2組中的<movable-view>寬／高均為180rpx。在movable-view.wxml中為<movable-view>使用direction='all'屬性表示允許在各方向移動，特別為第3組<movable-view>設置scale屬性，表示允許放大、縮小。

4.2.5 cover-view

<cover-view>是可覆蓋在原生組件上的文本視圖容器，可覆蓋的原生組件包括map、video、canvas、camera、live-player、live-pusher等。其內部只允許嵌套使用<cover-view>、<cover-image>和<button>。該組件的屬性如表4-8所示。

表4-8 cover-view組件屬性

<cover-image>是可覆蓋在原生組件上的圖片視圖容器，可覆蓋的原生組件與<cover-view>相同。該組件可以直接使用或被嵌套在<cover-view>中，其屬性如表4-9所示。

表4-9 cover-image組件屬性

【例4-5】　視圖容器組件cover-view的簡單應用

WXML（pages/demo01/cover-view/cover-view.wxml）的代碼片段如下：

視頻講解

WXSS（pages/demo01/cover-view/cover-view.wxss）的代碼片段如下：

運行效果如圖4-5所示。

圖4-5 視圖容器組件cover-view的簡單應用

【代碼說明】

本示例在cover-view.wxml中放置了一個<map>組件用于顯示默認地圖畫面，并在其內部放置了一個<cover-view>用于覆蓋在地圖上方。在這個<cover-view>內部放置了<cover-view>、<cover-image>和<button>組件，分別用于顯示自定義內容的文本、圖片和按鈕效果。由圖4-5可見，<cover-view>所包含的內容可以覆蓋在<map>組件上方正確顯示。