21.3 組件

21.3.1　視圖容器

視圖容器分為3種：view（普通視圖容器）、scroll-view（滾動視圖容器）、swiper（滑塊視圖容器）。

view容器的伸縮方向分為行和列。其相應的代碼如下。

---

<view>
    <view>flex-direction: row</view>
    <view >
        <view>1</view>
        <view>2</view>
        <view>3</view>
    </view>
</view>
<view>
    <view>flex-direction: column</view>
    <view >
        <view>1</view>
        <view>2</view>
        <view>3</view>
    </view>
</view>
  

---

scroll-view可配置的屬性如表21-9所示。

表21-9　scroll-view屬性說明

scroll-view的示例代碼如下。

---

<view>
    <view>vertical scroll</view>
    <scroll-view scroll-y="true"  bindscrolltoupper="upper" 
    bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-
    top="{{scrollTop}}">
        <view></view>
        <view ></view>
        <view></view>
        <view></view>
    </scroll-view>

    <view>
        <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>
    <view>horizontal scroll</view>
    <scroll-view scroll-x="true" >
        <view></view>
        <view ></view>
        <view></view>
        <view></view>
    </scroll-view>
</view>
  

---

swiper的屬性如表21-10所示。

表21-10　swiper屬性說明

swiper的示例代碼如下。

---

<swiper indicator-dots="{{indicatorDots}}"
    autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{imgUrls}}">
        <swiper-item>
            <image src="{{item}}"  />
        </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
  

---