专栏首页极客起源微信小程序开发实战(11):滚动组件(picker)

微信小程序开发实战(11):滚动组件(picker)

picker组件用于从列表中选择一个item,效果有点像iOS的ActionSheet,从窗口的底部弹出,选择一个item后关闭。picker可用于选择普通的item,也可以用于选择时间和日期。

我们可以使用picker组件的mode属性设置这3种列表方式。mode可以设置的值是selector、time和date。默认值时selector。其中selector表示普通的列表,time表示时间列表,date表示日期列表。

bindchange属性也是公用的,EventHandle类型, value改变时触发change事件。

mode属性值为selector时需要设置的属性

  • range:数组类型,表示picker的数据源。默认值是元素个数为0的数组([])
  • value:Number类型,表示选择的item的索引,从0开始。默认值是0

mode属性值为time时需要设置的属性

  • value:String类型,表示选中的时间,格式为“hh:mm”
  • start:String类型,表示有效时间范围的开始,字符串格式为“hh:mm”
  • end:String类型, 表示有效时间范围的结束,字符串格式为“hh:mm”

mode属性值为date时需要设置的属性

  • value:String类型,默认值是0,表示选中的日期,格式为“YYYY-MM-DD”
  • start:String类型,表示有效日期范围的开始,字符串格式为“YYYY-MM-DD”
  • end:String类型, 表示有效日期范围的结束,字符串格式为“YYYY-MM-DD”
  • fields:String类型,默认值时day,可设置的值包括year、month和day,表示选择器显示的日期例如,例如,如果设为month,日期选择器只会显示年和月,不会显示日。

下面的布局代码使用了3个picker组件演示了上述3种picker组件的使用方法。

<view style="margin:20px">
  <view style="margin-left:15px">地区选择器</view>
  <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
    <view style="padding: 13px;">
      当前选择:{{array[index]}}
    </view>
  </picker>
</view>
<view style="margin:20px">
  <view style="margin-left:15px">时间选择器</view>
  <picker mode="time" value="{{time}}" start="09:01" end="21:01"
            bindchange="bindTimeChange">
    <view style="padding: 13px;">
      当前选择: {{time}}
    </view>
  </picker>
</view>
<view style="margin:20px">
  <view style="margin-left:15px">日期选择器</view>
  <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01"
           bindchange="bindDateChange">
    <view style="padding: 13px;">
      当前选择: {{date}}
    </view>
  </picker>
</view>

显示效果如图1所示。

图1 未显示选择列表的picker组件显示效果

点击第1个picker组件,会弹出如图2所示的列表,可上下滑动选择item,然后点击“确定”按钮,会选中该item,并显示在picker组件上。

图2 普通picker选择列表的效果

点击第2个picker组件,会弹出如图3所示的时间选择列表。

图3 时间选择列表

点击第3个picker组件,会弹出如图4所示的日期选择列表。

图4 日期选择列表

前面的布局代码,在设置日期选择列表时,未使用fields属性,如果指定fields属性,将改变日期的显示粒度,例如,下面的布局代码将fields属性值设为year。

<picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange" fields="year" >
   <view style="padding: 13px;">
     当前选择: {{date}}
   </view>
 </picker>

布局的显示效果如图5所示,选择的结果也会以年的形式显示。

图5 只显示年的日期选择列表

本文分享自微信公众号 - 极客起源(geekculture),作者:geekori

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-07-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序开发实战(13):图像组件(image)

    image可以用来显示图像,这些图像可以是本地的,也可以是网络图像。例如,下面的布局代码显示了本地图像。

    蒙娜丽宁
  • 微信小程序开发实战(12):滑杆组件(slider)和form组件

    step:Number类型,默认值是1,表示滑杆滑动的步长,取值必须大于0,并且可被max - min整除

    蒙娜丽宁
  • Python编程思想(30):用 metaclass搞定一批类的特性

    如果希望创建某一批类全部具有某种特征,则可以通过 metaclass来实现。使用 metaclass可以在创建类时动态修改类定义。为了使用 metaclass动...

    蒙娜丽宁
  • (Demo分享)利用JavaScript(JS)实现一个九宫格拖拽功能

    Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离!

    Tz一号
  • DOM的滚动

    DOM规范中并没有规定各浏览器需要实现怎样的滚动页面区域,各浏览器实现了相应的方法,可以使用不同的方式控制页面区域的滚动。这些方法作为HTMLElement类型...

    meteoric
  • 小结:Swift、OC语言中多target在代码中如何区分

    经实践,网上的方法都无法成功,后来思考DEBUG宏定义方式,经实测有效,方式如下:

    woopDast1
  • 云计算把天变了 软件供应商怎能不变?

    所谓互联网的发展离不开软件和硬件两方面的技术进步。而软件供应商相比硬件供应商来讲其生存困难度一直要更为困难,软件供应商不仅要考虑用户需求什么,还要了解竞争对手的...

    静一
  • CSS 巧用 :before和:after

    前几天的晚上较全面的去看了下css的一些文档和资料,大部分的样式运用都没什么大问题了,只是有些许较陌生,但是也知道他们的存在和实现的是什么样式。今天主要想在这篇...

    kirin
  • 软件的复杂性正在杀死我们

    然而事与愿违。虽然并非是故意的,但是随着时间的推移,我们会因为软件构建中难以预料的复杂性而陷入困境,然后训练自己去寻找边缘案例,分析差距,以及单点要求所带来的所...

    哲洛不闹
  • css布局记录之双飞翼布局、圣杯布局

    双飞翼布局和圣杯布局是比较常用的布局方式,都是为了实现一行三列,并且两侧列固定宽度,中间列宽度自适应的效果:直接上代码记录下:

    用户1141560

扫码关注云+社区

领取腾讯云代金券