zoukankan      html  css  js  c++  java
  • 转:【微信小程序常见问题】下拉框选择器设置picker属性。(包括:城市、日期和时间选择器)

    1、picker写法(支持日期Date、时间Time和城市自定义)

    wxml文件

    <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">  
        <view class="picker">  
          当前选择:{{array[index]}}  
        </view>  
    </picker>  

    js文件

    Page({  
        data:{  
            index:0,  
            array:['北京','广州','上海','深圳']  
        },  
        bindPickerChange:function(e){  
    var that = this;
    that.setData({ index: e.detail.value }) } })

    2、下来框设置picker哪个属性

    • value表示选中了picker列表中的第几项,默认为0,即选中第一项
    • range设置picker列表中值, 数据类型为数组
    注:只需要设置picker的range属性和value属性的值即可
     
    3、扩展:

    picker

    滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器。

    普通选择器:mode = selector

    属性名类型默认值说明
    range Array [] mode为 selector 时,range 有效
    value Number 0 mode为 selector 时,是数字,表示选择了 range 中的第几个,从0开始。
    bindchange EventHandle   value改变时触发change事件,event.detail = {value: value}

    时间选择器:mode = time

    属性名类型默认值说明
    value String   表示选中的时间,格式为"hh:mm"
    start String   表示有效时间范围的开始,字符串格式为"hh:mm"
    end String   表示有效时间范围的结束,字符串格式为"hh:mm"
    bindchange EventHandle   value改变时触发change事件,event.detail = {value: value}

    日期选择器:mode = date

    属性名类型默认值说明
    value String 0 表示选中的日期,格式为"yyyy-MM-dd"
    start String   表示有效日期范围的开始,字符串格式为"yyyy-MM-dd"
    end String   表示有效日期范围的结束,字符串格式为"yyyy-MM-dd"
    fields String day 有效值year,month,day,表示选择器的粒度
    bindchange EventHandle   value改变时触发change事件,event.detail = {value: value}

    注意:开发工具暂时只支持mode = selector。

     

    示例代码:

    <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="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="2017-01-01" end="2017-12-31" bindchange="bindDateChange">
        <view class="picker">
          当前选择: {{date}}
        </view>
      </picker>
    </view>
    Page({
      data: {
        array: ['美国', '中国', '巴西', '日本'],
        index: 0,
        date: '2016-09-01',
        time: '12:01'
      },
      bindPickerChange: function(e) {
        console.log('picker发送选择改变,携带值为', e.detail.value)
        this.setData({
          index: e.detail.value
        })
      },
      bindDateChange: function(e) {
        this.setData({
          date: e.detail.value
        })
      },
      bindTimeChange: function(e) {
        this.setData({
          time: e.detail.value
        })
      }
    })

    
    
  • 相关阅读:
    asp.net2.0 Theme and Skin
    Microsoft Exchange Server 2010 介绍
    Visual Studio 2010 Team System 动手实验室
    WCF中的消息契约
    Windows Workflow Foundation实验01——Windows Workflow Foundation 快速入门(练习二)
    C#中Brush、Color、String相互转换
    VS自动生成有参构造函数并自动依赖注入插件
    C#集合已修改:可能无法执行枚举操作
    Docker安装后启动不了,报“参考的对象类型不支持尝试的操作”
    windows下安装Docker超全图文教程
  • 原文地址:https://www.cnblogs.com/xuzhengzong/p/7054246.html
Copyright © 2011-2022 走看看