視圖容器 · 小程序-shop商城開發手冊

## wxml 標簽 ### view標簽 ![](https://box.kancloud.cn/1200fa406c56be916a5aa8ac10504c6b_1006x374.png) 示例： <view class="section"> <view class="section__title">flex-direction: row</view> <view class="flex-wrp" style="flex-direction:row;"> <view class="flex-item bc_green">1</view> <view class="flex-item bc_red">2</view> <view class="flex-item bc_blue">3</view> </view> </view> <view class="section"> <view class="section__title">flex-direction: column</view> <view class="flex-wrp" style="height: 300px;flex-direction:column;"> <view class="flex-item bc_green">1</view> <view class="flex-item bc_red">2</view> <view class="flex-item bc_blue">3</view> </view> </view> ![](https://box.kancloud.cn/c628cce6ee0fcd5752d48cb69063508f_619x687.png) ### scroll-view標簽 ![](https://box.kancloud.cn/01645caffc71542b680a303c5fad85e0_1014x826.png) 使用豎向滾動時，需要給<scroll-view/>一個固定高度，通過 WXSS 設置 height。示例代碼： <view class="section"> <view class="section__title">vertical scroll</view> <scroll-view scroll-y style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}"> <view id="green" class="scroll-view-item bc_green"></view> <view id="red" class="scroll-view-item bc_red"></view> <view id="yellow" class="scroll-view-item bc_yellow"></view> <view id="blue" class="scroll-view-item bc_blue"></view> </scroll-view> <view class="btn-area"> <button size="mini" bindtap="tap">click me to scroll into view </button> <button size="mini" bindtap="tapMove">click me to scroll</button> </view> </view> <view class="section section_gap"> <view class="section__title">horizontal scroll</view> <scroll-view class="scroll-view_H" scroll-x style="width: 100%"> <view id="green" class="scroll-view-item_H bc_green"></view> <view id="red" class="scroll-view-item_H bc_red"></view> <view id="yellow" class="scroll-view-item_H bc_yellow"></view> <view id="blue" class="scroll-view-item_H bc_blue"></view> </scroll-view> </view> js var order = ['red', 'yellow', 'blue', 'green', 'red'] Page({ data: { toView: 'red', scrollTop: 100 }, upper: function(e) { console.log(e) }, lower: function(e) { console.log(e) }, scroll: function(e) { console.log(e) }, tap: function(e) { for (var i = 0; i < order.length; ++i) { if (order[i] === this.data.toView) { this.setData({ toView: order[i + 1] }) break } } }, tapMove: function(e) { this.setData({ scrollTop: this.data.scrollTop + 10 }) } }) ![](https://box.kancloud.cn/e525779b80bbd52ceb29cdc045f22818_415x645.png) Bug & Tip tip: 請勿在 scroll-view 中使用 textarea、map、canvas、video 組件 tip: scroll-into-view 的優先級高于 scroll-top tip: 在滾動 scroll-view 時會阻止頁面回彈，所以在 scroll-view 中滾動，是無法觸發 onPullDownRefresh tip: 若要使用下拉刷新，請使用頁面的滾動，而不是 scroll-view ，這樣也能通過點擊頂部狀態欄回到頁面頂部 ### swiper標簽 swiper 滑塊視圖容器 ![](https://box.kancloud.cn/073a0b7779d921f2434dc39690635efb_995x651.png) 從公共庫v1.4.0開始，change事件返回detail中包含一個source字段，表示導致變更的原因，可能值如下： autoplay 自動播放導致swiper變化； touch 用戶劃動引起swiper變化；其他原因將用空字符串表示。注意：其中只可放置<swiper-item/>組件，否則會導致未定義的行為。 swiper-item 僅可放置在<swiper/>組件中，寬高自動設置為100%。示例代碼： wxml <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{imgUrls}}"> <swiper-item> <image src="{{item}}" class="slide-image" width="355" height="150"/> </swiper-item> </block> </swiper> <button bindtap="changeIndicatorDots"> indicator-dots </button> <button bindtap="changeAutoplay"> autoplay </button> <slider bindchange="intervalChange" show-value min="500" max="2000"/> interval <slider bindchange="durationChange" show-value min="1000" max="10000"/> duration js Page({ data: { imgUrls: [ 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg' ], indicatorDots: false, autoplay: false, interval: 5000, duration: 1000 }, changeIndicatorDots: function(e) { this.setData({ indicatorDots: !this.data.indicatorDots }) }, changeAutoplay: function(e) { this.setData({ autoplay: !this.data.autoplay }) }, intervalChange: function(e) { this.setData({ interval: e.detail.value }) }, durationChange: function(e) { this.setData({ duration: e.detail.value }) } }) Bug & Tip tip: 請勿在 scroll-view 中使用 textarea、map、canvas、video 組件 tip: 如果在 bindchange 的事件回調函數中使用 setData 改變 current 值，則有可能導致 setData 被不停地調用，因而通常情況下請不要這樣使用 ### movable-area標簽 movable-area 基礎庫 1.2.0 開始支持，低版本需做兼容處理 movable-view 的可移動區域注意：movable-area 必須設置width和height屬性，不設置默認為10px ### movable-view標簽 ![](https://box.kancloud.cn/14c2b81de762706840e96e6def17b6f2_1003x611.png) movable-view 必須設置width和height屬性，不設置默認為10px movable-view 默認為絕對定位，top和left屬性為0px 當movable-view小于movable-area時，movable-view的移動范圍是在movable-area內；當movable-view大于movable-area時，movable-view的移動范圍必須包含movable-area（x軸方向和y軸方向分開考慮）注意：movable-view必須在<movable-area/>組件中，并且必須是直接子節點，否則不能移動。示例代碼： <view class="section"> <view class="section__title">movable-view區域小于movable-area</view> <movable-area style="height: 200px;width: 200px;background: red;"> <movable-view style="height: 50px; width: 50px; background: blue;" x="{{x}}" y="{{y}}" direction="all"> </movable-view> </movable-area> <view class="btn-area"> <button size="mini" bindtap="tap">click me to move to (30px, 30px)</button> </view> <view class="section__title">movable-view區域大于movable-area</view> <movable-area style="height: 100px;width: 100px;background: red;" direction="all"> <movable-view style="height: 200px; width: 200px; background: blue;"> </movable-view> </movable-area> </view> js Page({ data: { x: 0, y: 0 }, tap: function(e) { this.setData({ x: 30, y: 30 }); } }) ### cover-view標簽基礎庫 1.4.0 開始支持，低版本需做兼容處理覆蓋在原生組件之上的文本視圖，可覆蓋的原生組件包括map、video、canvas、camera，只支持嵌套cover-view、cover-image。 ### cover-image標簽基礎庫 1.4.0 開始支持，低版本需做兼容處理覆蓋在原生組件之上的圖片視圖，可覆蓋的原生組件同cover-view，支持嵌套在cover-view里。 ![](https://box.kancloud.cn/b1fd161a9668ce23bc5ce760c3b3ad3c_973x106.png) Bug & Tips tip: 基礎庫 1.6.0 起支持css transition動畫，transition-property只支持transform (translateX, translateY)與opacity。 tip: 基礎庫 1.6.0 起支持css opacity。 tip: 只可嵌套在原生組件map、video、canvas、camera內，避免嵌套在其他組件內。 tip: 事件模型遵循冒泡模型，但不會冒泡到原生組件。 tip: 文本建議都套上cover-view標簽，避免排版錯誤。 tip: 只支持基本的定位、布局、文本樣式。不支持設置單邊的border、background-image、shadow、overflow等。 tip: 建議子節點不要溢出父節點示例： wxml : <video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" controls="{{false}}" event-model="bubble"> <cover-view class="controls"> <cover-view class="play" bindtap="play"> <cover-image class="img" src="/path/to/icon_play" /> </cover-view> <cover-view class="pause" bindtap="pause"> <cover-image class="img" src="/path/to/icon_pause" /> </cover-view> <cover-view class="time">00:00</cover-view> </cover-view> </video> wxss: .controls { position: relative; top: 50%; height: 50px; margin-top: -25px; display: flex; } .play,.pause,.time { flex: 1; height: 100%; } .time { text-align: center; background-color: rgba(0, 0, 0, .5); color: white; line-height: 50px; } .img { width: 40px; height: 40px; margin: 5px auto; } js: Page({ onReady() { this.videoCtx = wx.createVideoContext('myVideo') }, play() { this.videoCtx.play() }, pause() { this.videoCtx.pause() } }) ### swiper標簽 ### swiper標簽 ### swiper標簽 ### swiper標簽