picker滚动选择器组件说明:

picker:

滚动选择器,现支持三种选择器,通过mode属性来区分,

分别是普通选择器(mode = selector),时间选择器(mode = time),日期选择器(mode = date),

默认是普通选择器。

picker滚动选择器示例代码运行效果如下:

下面是WXML代码:

[XML] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<view class="page">
  <view class="page__hd">
    <text class="page__title">picker</text>
    <text class="page__desc">选择器</text>
  </view>
  <view class="page__bd">
    <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="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
        <view class="picker">
          当前选择: {{date}}
        </view>
      </picker>
    </view>
  </view>
</view>

下面是JS代码:

[JavaScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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
    })
  }
})

下面是WXSS代码:

[CSS] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.page {
    min-height: 100%;
    flex: 1;
    background-color: #FBF9FE;
    font-size: 32rpx;
    font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
    overflow: hidden;
}
.page__hd{
    padding: 50rpx 50rpx 100rpx 50rpx;
    text-align: center;
}
.page__title{
    display: inline-block;
    padding: 20rpx 40rpx;
    font-size: 32rpx;
    color: #AAAAAA;
    border-bottom: 1px solid #CCCCCC;
}
.page__desc{
    display: none;
    margin-top: 20rpx;
    font-size: 26rpx;
    color: #BBBBBB;
}
.picker{
  padding: 26rpx;
  background-color: #FFFFFF;
}
.section{
    margin-bottom: 80rpx;
}
.section__title{
    margin-bottom: 16rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
}

picker滚动选择器的主要属性:

普通选择器:(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}

点击查看原文

微信小程序组件解读和分析:十二、picker滚动选择器的更多相关文章

  1. 微信小程序组件解读和分析:二、scroll-view可滚动视图区域

    scroll-view可滚动视图区域组件说明: 可滚动视图区域. 组件用法:纵向滚动用法 Tip: 使用竖向滚动时,需要给一个固定高度,通过 WXSS 设置 height,否则无法滚动. 当滚动到顶部 ...

  2. 微信小程序组件解读和分析:六、progress进度条

    progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行.progress进度条是微信小程序的组件,和HTML5的进度条progress类似. pro ...

  3. 微信小程序组件解读和分析:五、text文本

    text文本组件说明: text 文本就是微信小程序中显示出来的文本. text文本组件的示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 1 2 3 4 <v ...

  4. 微信小程序组件解读和分析:四、icon图标

      icon图标组件说明: icon是一种图标格式,用于系统图标.软件图标等,这种图标扩展名为.icon..ico.常见的软件或windows桌面上的那些图标一般都是ICON格式的.在应用上面很多地方 ...

  5. 微信小程序组件解读和分析:十四、slider滑动选择器

    slider滑动选择器组件说明: 滑动选择器. slider滑动选择器示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 ...

  6. 微信小程序组件解读和分析:十、input输入框

    input输入框组件说明: 本文介绍input 输入框的各种参数及特性. input输入框示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 01 02 03 04 0 ...

  7. 微信小程序组件解读和分析:十五、switch 开关选择器

    switch 开关选择器组件说明: switch,开关选择器.只能选择或者不选.这种属于表单控件或者查询条件控件. switch 开关选择器示例代码运行效果如下: 下面是WXML代码: [XML] 纯 ...

  8. 微信小程序组件解读和分析:八、checkbox复选项

    checkbox复选项组件说明: checkbox是小程序表单组件中的一个组件,作用是在表单中引导用户做出选择. 要使用checkbox组件,还需要在同组中所有的checkbox标签外使用checkb ...

  9. 微信小程序组件解读和分析:一、view(视图容器 )

    view组件说明:    视图容器    跟HTML代码中的DIV一样,可以包裹其他的组件,也可以被包裹在其他的组件内部.用起来比较自由随意,没有固定的结构. view组件的用法: 示例项目的wxml ...

随机推荐

  1. 论持久战之PHPStorm Xdebug Remote 调试环境搭建(不依赖本地环境)

    最近公司自己搭建了一个资源管理平台,哈哈,当然是我在github上找的,后台用PHP开发.个人觉得写得非常nice,web页面几乎模拟了真实OS,有兴趣的朋友下载部署体验https://github. ...

  2. vue入门教程 (vueJS2.X)

    vue入门教程vueJS2.X 写在前面 看完此教程可以达到:能看懂并能修改简单的vue项目. 看的过程中,请把所有例子都放到html文件中跑一遍. Vue.js 是什么 Vue.js(读音 /vju ...

  3. 织梦DEDE系统跨站跨数据库调用数据显示

    调用方法 本标签的调用格式为: {dede:sql sql="一条完整的SQL语句" appname="数据库配置参数"}您的底层模板{/dede:sql} 稍 ...

  4. POJ - 1986 Distance Queries(离线Tarjan算法)

    1.一颗树中,给出a,b,求最近的距离.(我没考虑不联通的情况,即不是一颗树的情况) 2.用最近公共祖先来求, 记下根结点到任意一点的距离dis[],这样ans = dis[u] + dis[v] - ...

  5. java的内部类解析

    内部类分为四种: 成员内部类.类方法与普通方法同级: 局部内部类.类方法内部,局部内部类有构造器,通过构造器把外部的变量传入局部内部类再使用是完全可以的 匿名内部类.匿名内部类是唯一没有构造器的类,和 ...

  6. P4317 花神的数论题 dp

    这题我一开始就想到数位dp了,其实好像也不是很难,但是自己写不出来...常规套路,f[i][j][k][t],从后往前填数,i位,j代表是否卡着上沿,k是现在有几个1,t是想要有几个.记忆化搜索就ok ...

  7. 从0开始学习Hadoop(2)安装JDK以及设置SSH

    安装JDK 使用ppa/源方式安装 1.添加ppa sudo add-apt-repository ppa:webupd8team/java sudo apt-get update 2.安装oracl ...

  8. Nvidia GPU 算力查询

    GPU Compute Capability Tesla K80 3.7 Tesla K40 3.5 Tesla K20 3.5 Tesla C2075 2.0 Tesla C2050/C2070 2 ...

  9. Spring--quartz中cronExpression配置说明

    Spring--quartz中cronExpression Java代码   字段      允许值         允许的特殊字符 秒       0-59        , - * / 分     ...

  10. VS2010打包回顾

    1.  在vs2010 选择“新建项目”à“ 其他项目类型”à“ Visual Studio Installerà “安装项目”: 命名为:Setup1 . 这是在VS2010中将有三个文件夹, 1. ...