零基础学做网站培训介绍

当前位置:

微信小程序滚动选择器picker组件

以下为学做网站论坛关于“微信小程序滚动选择器picker组件”讲解视频教程。

微信小程序滚动选择器picker组件的作用是制作出微信小程序中底部弹起的滚动选择器。

滚动选择器分为以下几种:(使用时,使用mode属性来确定)

  • selector 普通选择器
  • multiSelector 多列选择器
  • time 时间选择器
  • date 日期选择器
  • region 省市区选择器

以上这些选择都共有以下几种属性:

属性 类型 默认值 必填 说明 特别低版本
header-text string 选择器的标题,仅安卓可用 2.11.0
mode string selector 选择器类型 1.0.0
disabled boolean false 是否禁用 1.0.0
bindcancel eventhandle 取消选择时触发 1.9.90

除此之外,不同的滚动选择器,还有各自的属性。

普通选择器:mode = selector

属性名 类型 默认值 说明 特别低版本
range array/object array [] 给选择器添加数据。mode 为 selector 或 multiSelector 时,range 有效
range-key string 当 range 是一个对象数组 时,通过 range-key 来要获取哪个key下的值
value number 0 表示刚开始选择了 range 中的第几个(下标从 0 开始)
bindchange eventhandle value 改变时触发 change 事件,event.detail .value 来获取选中的数据值

基本用法:


<picker mode="selector" range="{{picker}}">点这里</picker>

<picker mode="selector" range="{{Objpicker}}" range-key="city">点这里</picker>

多列选择器:mode = multiSelector

属性名 类型 默认值 说明 特别低版本
range array/object array [] mode 为 selector 或 multiSelector 时,range 有效
range-key string 当 range 是一个对象数组 时,通过 range-key 来要获取哪个key下的值
value array [] 表示选择了 range 中的第几个(下标从 0 开始)
bindchange eventhandle value 改变时触发 change 事件,event.detail = {value}
bindcolumnchange eventhandle 列改变时触发

时间选择器:mode = time

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

<picker mode="time" start="12:30" end="16:30">时间选择器</picker>

起始时间:12:30  结束时间:16:30

日期选择器:mode = date

属性名 类型 默认值 说明 特别低版本
value string 当天 表示选中的日期,格式为"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}

<picker mode="date" start="1982-05-12" end="2200-05-12" bindchange="date">日期选择器</picker>

fields 有效值:*

说明
year 选择器粒度为年
month 选择器粒度为月份
day 选择器粒度为天

省市区选择器:mode = region 1.4.0

属性名 类型 默认值 说明 特别低版本
value array [] 表示选中的省市区,默认选中每一列的第一个值
custom-item string 可为每一列的顶部添加一个自定义的项 1.5.0
bindchange eventhandle value 改变时触发 change 事件,event.detail = {value, code, postcode},其中字段 code 是统计用区划代码,postcode 是邮政编码

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 如何注册微信小程序 图文教程 (110482 次浏览)
    要发布自己的微信小程序,首先需要在微信公众平台上注册微信小程序。注册步骤 登录“微信公众平台”,如果还没有账号,可以先注册一个。登录地址
  • 微信小程序开发授权 图文教程 (111947 次浏览)
    我们在“微信公众平台”注册好了小程序之后,接下来的工作就是开发微信小程序了。开发微信小程序前,我们需要进行授权。方法/步骤 点击“细致微信
  • 很多企业网站的首页都会做一种动态滚动展示企业产品的效果,是企业网站建设常用的方法。既展示了企业的产品,又让整个网站动静结合,不再毫无生气。
  • 我们在学习网站制作过程,发现很多网站都采用tab切换菜单来显示不同栏目的内容,这样即可以节省网站版面,也可以更多的显示网站的栏目内容。如何在自
  • 有些学员在学习制作网站时,想在自己的网站上添加一些左右滚动的切换图效果,这种效果可以实现自动切换和手动左右切换。如果要实现在网站上增加切换图
  • 对于有条件的学员,在做网站的时候,可以选择服务器来存储自己网站的内容,这样打开速度快,反应敏捷。对于网站服务器来说,一般空间商会按照其性
  • 对于学建网站,首先必须有自己的网站域名,如何选择适合自己的网站域名呢?【相关教程:如何购买域名和空间】选择域名三要素: 域名要简单、
  • 问:购买虚拟空间Windows和Linux怎么选择啊!那个好些!答:根据网站程序的不同选择不同的服务器空间,ASP---WINDOWS  php---LINUX。通常我们在建
  • 欢迎大家学习学做网站论坛的CSS视频教程,这节课程我们讲一下CSS选择器类型和样式。什么是CSS选择器每一条css样式定义由两部分组成,形式如下:
  • CSS选择器种类在网页设计和网站制作过程中,会使用CSS来控制网页的显示样式,CSS选择器的种类可以分为三大类: 标签名选择器 类选择器 ID选
  • 在学习学做网站论坛HTML视频课程和CSS课程时,使用详细讲解了网站制作的HTML知识和CSS知识。css样式是用来控制HTML样式的,样式表定义一个样式的时候
  • 微信小程序滚动选择器picker组件的作用是制作出微信小程序中底部弹起的滚动选择器。滚动选择器分为以下几种:(使用时,使用mode属性来确定)
  • 微信小程序Video视频组件是用于微信小程序中插入视频的组件。网络视频地址:[cce_html]http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload
  • 微信小程序可滚动视图区域scroll-view组件是定义微信小程序的一个固定显示区域,这个区域里的内容可以滚动显示。需要给scroll-view设置一个固定的