zoukankan      html  css  js  c++  java
  • 微信小程序---picker

    picker

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

    wxml:

    普通选择器(mode = selector

    <view class='cell-picker'>
    <view class='cell-name'>chengshi</view>
    <view class='cell-val'>
    <picker mode = "selector"  bindchange="bindPickerChangeType" range-key="{{'Name'}}" value="{{indexType}}" range="{{array}}">{{array[indexType].Name}}</picker>
    </view>
    </view>

    mode = selector:普通选择器

    bindchange:value 改变时触发 change 事件

    range-key: 当 range 是一个 Object Array 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容

    value: value 的值表示选择了 range 中的第几个(下标从 0 开始)

    range: mode为 selector 或 multiSelector 时,range 有效。

    data:{ 

    array: [
    {
    "Name": "shanghai",
    "Id": "020"
    }, {
    "Name": "beijing ",
    "Id": "005"
    }, {
    "Name": "tianjin",
    "Id": "030"
    }
    ],
    indexType: 0, //选择了 range 中的第几个(下标从 0 开始)

    }

    //点击
    bindPickerChangeType: function (e) {
    console.log('picker发送选择改变,携带值为', e.detail.value)
    this.setData({
    indexType: e.detail.value
    })
    },
  • 相关阅读:
    python处理excel文件
    Python datetime模块
    OrderedDict 有序字典以及读取json串时如何保持原有顺序
    ansible 学习笔记
    nginx的location和rewrite
    实体机重装系统
    热词
    教育
    生活
    1、两数之和
  • 原文地址:https://www.cnblogs.com/Super-scarlett/p/10039383.html
Copyright © 2011-2022 走看看