微信小程序开发指南

基于ColorUI的组件化页面开发


选择

普通选择

  • 样式图例

  • 示例代码
 data: {
    StatusBar: app.globalData.StatusBar,
    CustomBar: app.globalData.CustomBar,
    index: null,
    picker: ['喵喵喵', '汪汪汪', '哼唧哼唧'],
    multiArray: [
      ['无脊柱动物', '脊柱动物'],
      ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'],
      ['猪肉绦虫', '吸血虫']
    ],
    objectMultiArray: [
      [{
          id: 0,
          name: '无脊柱动物'
        },
        {
          id: 1,
          name: '脊柱动物'
        }
      ],
      [{
          id: 0,
          name: '扁性动物'
        },
        {
          id: 1,
          name: '线形动物'
        },
        {
          id: 2,
          name: '环节动物'
        },
        {
          id: 3,
          name: '软体动物'
        },
        {
          id: 3,
          name: '节肢动物'
        }
      ],
      [{
          id: 0,
          name: '猪肉绦虫'
        },
        {
          id: 1,
          name: '吸血虫'
        }
      ]
    ],
    multiIndex: [0, 0, 0],
    time: '12:01',
    date: '2018-12-25',
    region: ['广东省', '广州市', '海珠区'],
    imgList: [],
    modalName: null,
    textareaAValue: '',
    textareaBValue: ''
  }
    <view class="cu-form-group margin-top">
        <view class="title">普通选择</view>
        <picker bindchange="PickerChange" value="{{index}}" range="{{picker}}">
            <view class="picker">
                {{index?picker[index]:'禁止换行,超出容器部分会以 ... 方式截断'}}
            </view>
        </picker>
    </view>

多列选择

  • 样式图例

  • 示例代码
<view class="cu-form-group">
        <view class="title">多列选择</view>
        <picker mode="multiSelector" bindchange="MultiChange" bindcolumnchange="MultiColumnChange" value="{{multiIndex}}"
         range="{{multiArray}}">
            <view class="picker">
                {{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}}
            </view>
        </picker>
    </view>

时间选择

  • 样式图例

  • 示例代码
<view class="cu-form-group">
        <view class="title">时间选择</view>
        <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="TimeChange">
            <view class="picker">
                {{time}}
            </view>
        </picker>
    </view>

日期选择

  • 样式图例

  • 示例代码
<view class="cu-form-group">
        <view class="title">日期选择</view>
        <picker mode="date" value="{{date}}" start="2015-09-01" end="2020-09-01" bindchange="DateChange">
            <view class="picker">
                {{date}}
            </view>
        </picker>
    </view>

地址选择

  • 样式图例

  • 示例代码
<view class="cu-form-group">
        <view class="title">地址选择</view>
        <picker mode="region" bindchange="RegionChange" value="{{region}}" custom-item="{{customItem}}">
            <view class="picker">
                {{region[0]}},{{region[1]}},{{region[2]}}
            </view>
        </picker>
    </view>

页面列表

ITEM_HTML