微信小程序学习（5）- 下

4.5 picker / picker-view 选择器

4.5.1 picker 底部弹起的滚动选择器

​ 从底部弹起的滚动选择器，现支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。

普通选择器：mode = selector

• range: 数据源(Array/Object Array) 作为选择器数据
• range-key: 当 range 是 Object Array 时， 通过 range-key 指定 Object 中 key 的值作为选择器显示内容
• value: 绑定的值，指选择 range 中第几个 (下标从 0 开始)
• bindcharge : value 改变时触发事件 event.datail = {value: value}
• disabled: 禁用
• bindcancel: 取消选择或者点击其他收起选择器时触发。

多列选择器： mode="multiSelector"

• range: 接受二维数组，二维数组对象，下表0为第一列，依次类推，放初次显示的数据
• range-key: 当 range 是一个 二维Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容，与普通选择器一样
• value、bindcharge、bindcancel 、disabled: 同普通选择器
• bindcolumnchange: 列值发生改变，就触发，event.detail = {column: column, value: value}，column 的值表示改变了第几列（下标从0开始），value 的值表示变更值的下标

​ bindcolumnchange这个是核心，只要灵活使用这个，多列其实很简单，时间选择器就是简单多列选择器，只需要知道一开始数据即可，日期、省份选择器就是负责的多列选择器，每一列都有其子列对应的值，所以要做切换判断，所以用bindcolumnchange可以在这里判断第一列值发生改变时，修改第二列显示的数据

时间选择器： mode="time"

• value: 选中的时间，格式为"hh:mm"
• start / end: 有效时间范围的 开始/结束, 字符串格式为"hh:mm"
• bindchange、bindcancel、disabled: 同普通选择器
• disabled: 是否禁用

日期选择器： mode="date"

• value: 选中的日期，格式为"YYYY-MM-DD"
• start / end: 有效日期范围的 开始/结束, 字符串格式为"YYYY-MM-DD"
• fields: 选择器的范围，默认值data,还有 month、year属性值
• bindchange、bindcancel、disabled: 同普通选择器

省市区选择器：mode = region

• value: 表示选中的省市区，默认选中每一列的第一个值
• custom-item: 可为每一列的顶部添加一个自定义的项
• bindchange: value 改变时触发 change 事件，event.detail = {value: value, code: code, postcode: postcode}，其中字段code是统计用区划代码，postcode是邮政编码
• bindcancel、disabled: 同普通选择器

附加上面几个选择器的例子(别人写的，我觉得不错)：

<view class="section">
  <view class="section__title">普通选择器</view>
  <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
    <view class="picker">
      当前选择：{{array[index]}}
    </view>
  </picker>
</view>
<view class="section">
  <view class="section__title">多列选择器</view>
  <picker
    mode="multiSelector"
    bindchange="bindMultiPickerChange"
    bindcolumnchange="bindMultiPickerColumnChange"
    value="{{multiIndex}}"
    range="{{multiArray}}"
  >
    <view class="picker">
      当前选择：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
    </view>
  </picker>
</view>
<view class="section">
  <view class="section__title">时间选择器</view>
  <picker
    mode="time"
    value="{{time}}"
    start="09:01"
    end="21:01"
    bindchange="bindTimeChange"
  >
    <view class="picker">
      当前选择: {{time}}
    </view>
  </picker>
</view>

<view class="section">
  <view class="section__title">日期选择器</view>
  <picker
    mode="date"
    value="{{date}}"
    start="2015-09-01"
    end="2017-09-01"
    bindchange="bindDateChange"
  >
    <view class="picker">
      当前选择: {{date}}
    </view>
  </picker>
</view>
<view class="section">
  <view class="section__title">省市区选择器</view>
  <picker
    mode="region"
    bindchange="bindRegionChange"
    value="{{region}}"
    custom-item="{{customItem}}"
  >
    <view class="picker">
      当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}
    </view>
  </picker>
</view>

Page({
    data:{
        array:[1,2,3,4,5,6,7,8,9,0],
        arrayObj:[
            { id: 1001, name: "jack" },
            { id: 1002, name: "lilei" },
            { id: 1003, name: "hanmeimei" },
            { id: 1004, name: "lucy" },
            { id: 1005, name: "poly" }
        ],
        showme: "请选择一个人名",
        arrayMulti: [
            [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
            [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
        ],
        arrayObjMulti:[
            [
                { id: 1001, name: "jack" },
                { id: 1002, name: "lilei" },
                { id: 1003, name: "hanmeimei" },
                { id: 1004, name: "lucy" },
                { id: 1005, name: "poly" }
            ],
            [
                { id: 1001, name: "jack" },
                { id: 1002, name: "lilei" },
                { id: 1003, name: "hanmeimei" },
                { id: 1004, name: "lucy" },
                { id: 1005, name: "poly" }
            ]
        ],

        timeLable: "请选择时间",
        dateLable: "请选择日期",
        cityLable: "请选择城市"
    },

    changeme: function(e) {
        var index = e.detail.value;
        console.log("index下标值为: " + index);
        var id = this.data.arrayObj[index].id;
        var name = this.data.arrayObj[index].name;
        this.setData({
            showme: id + name
        });

    },

    cancelme: function (e) {
        console.log("触发取消事件...");
    },

    columnchange:function(e) {
        console.log(e.detail);
    },

    changemeMulti: function(e) {
        var indexs = e.detail.value;
        var arrayObjMulti = this.data.arrayObjMulti;

        for (var i = 0; i < indexs.length ; i ++) {
            var indexTmp = indexs[i];
            var id = arrayObjMulti[i][indexTmp].id;
            var name = arrayObjMulti[i][indexTmp].name;
            console.log(id + " " + name);
        }

    },

    changeTime: function(e) {
        this.setData({
            timeLable: e.detail.value
        });
    },

    changeDate: function (e) {
        this.setData({
            dateLable: e.detail.value
        });
    },

    changeCity: function (e) {
        this.setData({
            cityLable: e.detail.value
        });
    }
})

4.5.2 picker-view 嵌入页面的滚动选择器

• value: 数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。
• indicator-style / indicator-class: 设置选择器中间选中框的 样式/类名
• mask-style / mask-class：设置蒙层的 样式/类名
• bindchange: 事件触发
• bindpickstart / bindpickend：当滚动选择 开始/结束 时候触发事件（2.3.1版本支持）
• <picker-view-column> 子标签，一列就需要一个

<picker-view style='width:100%;height:250px;' bindchange="changeme">
    <picker-view-column>
        <view wx:for="{{year}}">{{item}}</view>
    </picker-view-column>
    <picker-view-column>
        <view wx:for="{{month}}">{{item}}</view>
    </picker-view-column>
    <picker-view-column>
        <view wx:for="{{day}}">{{item}}</view>
    </picker-view-column>
</picker-view>

Page({
  data: {
    year: [1990, 1995, 2000, 2005, 2010, 2015, 2020],
    month: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    day: [1, 5, 10, 15, 20, 25, 30],
    myvalue: "请选择日期"
  },
  changeme: function (e) {
    var indexs = e.detail.value;

    var year = this.data.year[indexs[0]];
    var month = this.data.month[indexs[1]];
    var day = this.data.day[indexs[2]];

    this.setData({
      myvalue: year + "年" + month + "月" + day + "日"
    });
  }
})

4.6 radio-group & radio

4.6.1 radio-group

• bindchange: 选中项发生改变时触发

• 包含 radio 单选项

4.6.2 radio

• value: 选中时携带的值
• checked: 选中，默认 false
• disabled: 禁用，默认 flase
• color: 选项框颜色

<radio-group class="radio-group" bindchange="radioChange">
  <label class="radio" wx:for="{{items}}">
    <radio value="{{item.name}}" checked="{{item.checked}}" />
    {{item.value}}
  </label>
</radio-group>

Page({
  data: {
    items: [
      {name: 'USA', value: '美国'},
      {name: 'CHN', value: '中国', checked: 'true'},
      {name: 'BRA', value: '巴西'}
    ]
  },
  radioChange(e) {
    console.log('radio发生change事件，携带value值为：', e.detail.value)
  }
})

4.7 slider 滑动选择器

• min / max: 最 小/大 值
• step: 步长，必须大于0，且可以被 (max-min) 整除
• disabled: 禁用
• value: 选中值
• activeColor / backgroundColor: 已选择/未选择 的颜色
• block-size: 滑块大小 12-28之间，默认28
• block-color: 滑块颜色
• show-value：是否展示当前值，默认值 false
• bindchanging: 滑动过程触发事件
• bindchange: 滑动一次完成后触发事件

<slider min="10" max="90" show-value="{{true}}" activeColor="red" backgroundColor="blue" block-color="green" bindchanging="" bindchange='changeme'></slider>

<view style='background-color:green;width:100%;height:{{myheight}};'></view>

Page({
    data: {
        myheight: "500rpx",
        staticHeight: 500
    },

    iamchanging:function(e) {
        var val = e.detail.value;
        var newHeight = this.data.staticHeight * (val/100);
        this.setData({
            myheight: newHeight + "rpx"
        });
    },

    changeme: function (e) {
        var val = e.detail.value;
        var newHeight = this.data.staticHeight * (val / 100);
        this.setData({
            myheight: newHeight + "rpx"
        });
    }
})

4.8 switch 开关选择器

• checked: 选中，默认值 false
• disabled: 禁用，默认值 false
• type: 样式，默认值switch, 还有 checkbox
• bindchange： checked改变时触发
• color： swictch 颜色

<view class="body-view">
  <switch checked bindchange="switch1Change" />
  <switch type="checkbox" bindchange="switch2Change" />
</view>

Page({
  switch1Change(e) {
    console.log('switch1 发生 change 事件，携带值为', e.detail.value)
  },
  switch2Change(e) {
    console.log('switch2 发生 change 事件，携带值为', e.detail.value)
  }
})

4.9 textarea 多行输入框

• 基本 input 属性都有
• auto-height：自动增高，默认 false，设置文本框高度后自动失效
• show-confirm-bar: 显示键盘上方带有”完成“按钮那一栏, 默认值true
• bindlinechange: 当行数发生变化时触发，event.detail = {height: 0, heightRpx: 0, lineCount: 0}
• bindinput: 触发时，并不能返回一段字符串替换当前文本框，与input 输入框的区别

下节介绍导航组件