微信小程序学习(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 输入框的区别

下节介绍导航组件

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值