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