<custom chineseName="底部弹起的滚动选择器" engName="picker"></custom>
<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>普通选择器</view>
            <view>mode="selector"</view>
        </view>
        <view class="section" hover-class="section-active">
            <picker
                mode="selector"
                value="{{arrIndex}}"
                range="{{selector}}"
                range-key="name"
                title="选择器标题"
                bind:change="selectorChange">
                <view class="picker">
                    请选择：{{selector[arrIndex].name}}
                </view>
            </picker>
        </view>
    </view>

    <view class="card-area">
        <view class="top-description border-bottom">
            <view>时间选择器</view>
            <view>mode="time"</view>
        </view>
        <view class="section" hover-class="section-active">
            <picker
                mode="time"
                value="{{time}}"
                start="1:01"
                end="22:59"
                bind:change="timeChange"
                disabled="false">
                <view class="picker">
                    请选择时间：{{time}}
                </view>
            </picker>
        </view>
    </view>

    <view class="card-area">
        <view class="top-description border-bottom">
            <view>日期选择器</view>
            <view>mode="date"</view>
        </view>
        <view class="section date-section" hover-class="section-active">
            <picker
                mode="date"
                value="{{dateDay}}"
                bind:change="dateChangeDay"
                fields="day">
                <view class="picker">
                    请选择日期：{{dateDay}}
                </view>
            </picker>
        </view>
    </view>

    <view class="card-area">
        <view class="top-description border-bottom">
            <view>多列选择器</view>
            <view>mode="multiSelector"</view>
        </view>
        <view class="section date-section" hover-class="section-active">
            <picker
                mode="multiSelector"
                bindchange="bindMultiPickerChange"
                bindcolumnchange="bindMultiPickerColumnChange"
                value="{{multiIndex}}"
                range="{{multiArray}}"
                title="多列选择器">
                <view class="picker">
                    请选择：{{multiArray[0][multiIndex[0]]}} {{multiArray[1][multiIndex[1]]}} {{multiArray[2][multiIndex[2]]}}
                </view>
            </picker>
        </view>
    </view>

    <view class="card-area">
        <view class="top-description border-bottom">
            <view>省市区选择器</view>
            <view>mode="region"</view>
        </view>
        <view class="section" hover-class="section-active">
            <picker
                mode="region"
                bind:change="regionChange"
                custom-item="{{customItem}}"
                title="地区选择器">
                <view class="picker">
                    请选择地区：{{regionData[0]}} {{regionData[1]}} {{regionData[2]}}
                </view>
            </picker>
        </view>
    </view>

    <view class="card-area">
        <view class="top-description border-bottom">
            <view>设置禁用</view>
            <view>disabled</view>
        </view>
        <view class="section" hover-class="section-active">
            <picker
                mode="selector"
                class="disabled"
                value="{{arrIndex}}"
                range="{{selector}}"
                range-key="name"
                disabled>
                <view class="picker">
                    请选择：{{selector[arrIndex].name}}
                </view>
            </picker>
        </view>
    </view>

    <view class="card-area">
        <view class="top-description border-bottom">
            <view>取消选择时触发提示</view>
            <view>bindcancel</view>
        </view>
        <view class="section" hover-class="section-active">
            <picker
                mode="selector"
                value="{{arrIndex}}"
                range="{{selector}}"
                range-key="name"
                bind:change="selectorChange"
                bind:cancel="cancel">
                <view class="picker">
                    请选择：{{selector[arrIndex].name}}
                </view>
            </picker>
        </view>
    </view>
</view>