鸿蒙5.0开发进阶：JS组件-基础组件（picker-view）

最新推荐文章于 2025-10-16 09:30:21 发布
原创 最新推荐文章于 2025-10-16 09:30:21 发布 · 638 阅读 · 24 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#harmonyos #android #前端 #鸿蒙系统 #javascript #ArkUI #ArkTS

往期鸿蒙5.0全套实战文章必看：（文中附带全栈鸿蒙5.0学习资料）

picker-view

说明

从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

嵌入页面的滑动选择器。

子组件

不支持。

属性

除支持通用属性外，还支持如下属性：

名称类型默认值必填描述
typestringtext否

设置滑动选择器的类型，该属性不支持动态修改，可选项有：

- text：文本选择器。

- time：时间选择器。

- date：日期选择器。

- datetime：日期时间选择器。

- multi-text：多列文本选择器。

文本选择器

名称类型默认值必填描述
rangeArray-否

设置文本选择器的取值范围。

使用时需要使用数据绑定的方式range ={{data}}，js中声明相应变量data：["15","20","25"]。

selectedstring0否设置文本选择器的默认选择值，该值需要为range的索引。
indicatorprefixstring-否文本选择器选定值增加的前缀字段。
indicatorsuffixstring-否文本选择器选定值增加的后缀字段。

时间选择器

名称类型默认值必填描述
containsecondbooleanfalse否时间选择器是否包含秒。
selectedstring当前时间否

设置时间选择器的默认取值，格式为 HH:mm；

当包含秒时，格式为HH:mm:ss。

hoursnumber

241-4

-5+

否

设置时间选择器采用的时间格式，可选值：

- 12：按照12小时制显示，用上午和下午进行区分；

- 24：按照24小时制显示。

从API Version 5开始，默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。

日期选择器

名称类型默认值必填描述
start<time>1970-1-1否设置日期选择器的起始时间，格式为 YYYY-MM-DD。
end<time>2100-12-31否设置日期选择器的结束时间，格式为 YYYY-MM-DD。
selectedstring当前日期否设置日期选择器的默认选择值，格式为 YYYY-MM-DD。
lunar5+booleanfalse否设置日期选择器弹窗界面是否为农历展示。
lunarswitchbooleanfalse否设置日期选择器是否显示农历开关，显示农历开关时，可以在弹窗界面展现农历的开关由于公历和农历切换。在设置显示农历时，开关状态为开，当设置不显示农历时，开关状态为关。

日期时间选择器

名称类型默认值必填描述
selectedstring当前日期时间否设置日期时间选择器的默认取值，格式有两种，为月日时分MM-DD-HH-mm或者年月日时分YYYY-MM-DD-HH-mm，不设置年时，默认使用当前年，该取值表示选择器弹窗时弹窗界面的默认选择值。
hoursnumber

241-4

-5+

否

设置日期时间选择器采用的时间格式，可选值：

- 12：按照12小时制显示，用上午和下午进行区分；

- 24：按照24小时制显示。

从API Version 5开始，默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。

lunar5+booleanfalse否设置日期时间选择器弹窗界面是否为农历展示。
lunarswitchbooleanfalse否设置日期时间选择器是否显示农历开关，显示农历开关时，可以在弹窗界面展现农历的开关由于公历和农历切换。在设置显示农历时，开关状态为开，当设置不显示农历时，开关状态为关。

多列文本选择器

名称类型默认值必填描述
columnsnumber-是设置多列文本选择器的列数。
range二维Array-否

设置多列文本选择器的选择值，该值为二维数组。长度表示多少列，数组的每项表示每列的数据，如 [["a","b"], ["c","d"]]。

使用时需要使用数据绑定的方式range ={{data}}，js中声明相应变量data：["15","20","25"]。

selectedArray[0,0,0,…]否设置多列文本选择器的默认值，每一列被选中项对应的索引构成的数组，该取值表示选择器弹窗时弹窗界面的默认选择值。

样式

除支持通用样式外，还支持如下样式：

名称类型默认值必填描述
color<color>#ffffff否候选项字体颜色。
font-size<length>16px否候选项字体尺寸，类型length，单位px。
selected-color<color>#ff0a69f7否选中项字体颜色。
selected-font-size<length>20px否选中项字体尺寸，类型length，单位px。
disappear-color5+<color>#ffffff否渐变消失项的字体颜色。消失项是在一列中有五个选项场景下最上和最下的两个选项。
disappear-font-size5+<length>14px否渐变消失项的字体尺寸。消失项是在一列中有五个选项场景下最上和最下的两个选项。
font-familystringsans-serif否选项字体类型。字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。

事件

仅支持如下事件：

文本选择器

名称参数描述
change{ newValue: newValue, newSelected: newSelected }文本选择器选定值后触发该事件。

时间选择器

名称参数描述
change{ hour: hour, minute: minute, [second:second]}

时间选择器选定值后触发该事件。

包含秒时，返回时分秒。

日期选择器

名称参数描述
change{ year:year, month:month, day:day }日期选择器选择值后触发该事件。

日期时间选择器

名称参数描述
change{ year:year, month:month, day:day, hour:hour, minute:minute }日期时间选择器选择值后触发该事件。

多列文本选择器

名称参数描述
columnchange{ column:column, newValue:newValue, newSelected:newSelected }多列文本选择器某一列的值改变时触发该事件，column：第几列修改，newValue：选中的值，newSelected：选中值对应的索引。

方法

不支持。

示例

文本选择器

<!-- xxx.hml -->
<div class="container">
    <text class="title">
        选中值：{{value}}  选中下标： {{index}}
    </text>
    <picker-view class="text-picker" type="text" range="{{options}}" selected="0" indicatorprefix="prefix" indicatorsuffix="suffix" @change="handleChange"></picker-view>
</div>
/* xxx.css */
.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50%;
}
.title {
    font-size: 30px;
    text-align: center;
    margin-top: 50%;
}
/* xxx.js */
export default {
    data: {
        options: ['选项1', '选项2', '选项3'],
        value: "选项1",
        index: 0
    },
    handleChange(data) {
        this.value = data.newValue;
        this.index = data.newSelected;
    },
}

时间选择器

<!-- xxx.hml -->
<div class="container">
  <text class="title">
    Selected：{{time}}
  </text>
  <picker-view class="time-picker" type="time" selected="{{defaultTime}}" @change="handleChange"></picker-view>
</div>
/* xxx.css */
.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50%;
}
.title {
    font-size: 31px;
    text-align: center;
    margin-top: 50%;
}
/* xxx.js */
export default {
  data: {
    defaultTime: "",
    time: "",
  },
  onInit() {
    this.defaultTime = this.now();
  },
  handleChange(data) {
    this.time = this.concat(data.hour, data.minute);
  },
  now() {
    const date = new Date();
    const hours = date.getHours();
    const minutes = date.getMinutes();
    return this.concat(hours, minutes);
  },
  fill(value) {
    return (value > 9 ? "" : "0") + value;
  },
  concat(hours, minutes) {
    return `${this.fill(hours)}:${this.fill(minutes)}`;
  },
}

日期选择器

<!-- xxx.hml -->
<div class="container">
    <text class="title">
        Selected：{{date}}
    </text>
    <picker-view class="time-picker" type="date" selected="{{defaultTime}}" @change="handleChange" lunarswitch="true"></picker-view>
</div>
/* xxx.css */
.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50%;
}
.title {
    font-size: 31px;
    text-align: center;
    margin-top: 50%;
}
/* xxx.js */
export default {
    data: {
        date: "",
    },
    handleChange(data) {
        this.date = data.year + "年" + data.month + "月" + data.day + "日";
    },
}

日期时间选择器

<!-- xxx.hml -->
<div class="container">
    <text class="title">
        Selected：{{datetime}}
    </text>
    <picker-view class="date-picker" type="datetime"  hours="24" lunarswitch="true" @change="handleChange"></picker-view>
</div>
/* xxx.css */
.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50%;
}
.title {
    font-size: 31px;
    text-align: center;
    margin-top: 50%;
}
/* xxx.js */
export default {
    data: {
        datetime: "",
    },
    handleChange(data) {
        this.datetime = data.year + "年" + data.month + "月" + data.day + "日" + data.hour + "时" + data.minute + "分";
    },
}

多列文本选择器

<!-- xxx.hml -->
<div class="container">
    <text class="title">
        Selected：{{ value }}
    </text>
    <picker-view class="multitype-picker" type="multi-text" columns="3" range="{{ multitext }}" @columnchange="handleChange"></picker-view>
</div>
/* xxx.css */
.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50%;
}
.title {
    font-size: 31px;
    text-align: center;
    margin-top: 50%;
}
/* xxx.js */
export default {
    data: {
        multitext: [
            [1, 2, 3],
            [4, 5, 6],
            [7, 8, 9],
        ],
        value: ""
    },
    handleChange(data) {
        this.value = data.column + "列，" + "值为" + data.newValue + "，下标为" + data.newSelected;
    },
}

鸿蒙5.0进阶开发：UI开发-容器组件（picker开发）
AyomQAQ的博客
01-05 458
picker是滑动选择器组件，类型支持普通选择器、日期选择器、时间选择器、时间日期选择器和多列文本选择器。
鸿蒙5.0版开发：ArkTS组件-基础组件（CalendarPicker）
m0_69424697的博客
09-12 858
日历选择器组件，提供下拉日历弹窗，可以让用户选择日期。
uni-app内置组件picker-view和uni-popup的使用注意事项
m0_60605042的博客
06-02 5303
参考说明：uni-app的官方文档在使用bindChange方法时会有延迟，可以加上immediate-change=‘true’立即执行左边的是每列的下标，右边的数字是每列里面的选中的下标。
PickerView的简单介绍
你的外祖父的博客
03-06 5009
PickerView现在在大多数App都有使用到，例如设置时间的时候，或者选择地区的时候，使用PickerView来实现很实用，在底部弹出个对话框，接着进行选择就可以了，而且OptionsPickerView还支持三级联动，支持自定义布局等功能，接下来就简单的用代码实现一个小Demo： 首先就是要添加依赖啦，具体的版本自己选择 //实际引入请把"3.x"替换成具体版本号，最新版本号请以GitHub...
uniapp使用picker-view组件实现选择器可进行搜索
qq_52065282的博客
03-15 1万+
效果图：1、使用uniapp自带的picker-view组件实现2、在父组件中使用。
【uniapp】picker-view选择器的使用
每天进步一点点, 靠近小目标一点点~
03-06 6191
前文在picker使用的帖子介绍到, 需要做一个医院下拉选择的一个功能, 因为长久没用, 忘记了picker和picker-view的使用, 因为picker弹框的样式是自带的, 且无法更改样式, 插入到项目很不友好, 于是把组件替换成picker-view
微信小程序使用picker-view自定义时间选择器
LRQQHM的博客
03-01 1525
【代码】微信小程序简单自定义时间选择器。
鸿蒙5.0版开发：ArkTS组件-CalendarPicker
m0_69424697的博客
11-09 1005
日历选择器组件，提供下拉日历弹窗，可以让用户选择日期。
鸿蒙5.0版开发：UI框架JS组件-基础组件（picker-view）
m0_69424697的博客
12-12 1053
嵌入页面的滑动选择器。
鸿蒙5.0版开发：ArkTS组件-日历选择器弹窗 (CalendarPickerDialog)
m0_69424697的博客
11-29 1219
点击日期弹出日历选择器弹窗，可选择弹窗内任意日期。
告别平庸！我用 picker-view 造的这两个选择器，让产品经理闭嘴了
热爱WebGIS的博客
07-07 807
我们的用户是尊贵的VIP，所以这个选择器，格调一定要高！选中框的上下边框线要用咱们品牌的‘尊贵蓝’，蒙层不能是傻乎乎的灰色，要那种上下渐变消失的羽化效果。哦对了，交互也要智能，选了北京当出发地，目的地里就不能再出现北京了！主题要用我们App的暗黑科技风，选中框要荧光绿的，要那种未来感！我沿用了之前的配置，但PM马上就指出来了：“不对啊，我滑动的时候，下面的总结文字怎么没反应？所以，各位同学，下次再遇到看似刁钻的选择器需求，别再下意识地去想“这怎么实现啊”，不妨先问问自己：“好了，今天的分享就到这里。
微信小程序之表单组件二
xlsw_的博客
09-21 605
一、picker-view组件 1.补充：与picker区别：picker是在页面上通过点击来触发一个选择器来让我们进行选择，选择完成之后再关闭，而picker-view其实是一个视图组件，嵌入到我们当前页面中去，是不会消失的。 2.功能： 3.属性： 二、radio组件：单选项目（简单） 三、slider组件：滑动选择器 作用：将图片调色，亮度，对比色，或者将图片放大缩小。 补充：bindchange和bindchanging有些相同，上述效果
微信小程序picker-view样式层次踩坑记录
初夏de遐想的博客
01-24 7268
微信小程序picker-view样式踩坑记录picker-view适用范围一个简单的例子样式层次picker-view的stylepicker-view-columnpicker-view的mask-stylepicker-view的indicator-style总结 picker-view适用范围 在小程序的开发中，有些时候需要用到下拉列表，一般情况下直接用微信现成的 picker组件已经可以满...
用PickerView定制一个简单的datepicker
wsdxsYB的博客
05-26 804
做应用的时候免不了会对某些UI控件做一些样式上的定制，比如Button的背景色，圆角，阴影等元素的调整。UIDatePicker也是一个比较常用的UI控件，iOS 7简约的设计风格在某些场景下可能并不是很合适，所以UIDatePicker有时也是一个有较大定制需求的控件。但是令人匪夷所思的一点是，尽管UIDatePicker和UIPickerView看起来好像是差不多的两个UI组件，但是从iOS的
鸿蒙API13开发【picker-view】JS容器组件
鸿蒙的技术博客
02-19 926
嵌入页面的滑动选择器。
微信小程序 picker-view日期选择器(-)
热门推荐
七色花
09-28 2万+
程序需要用到时间控件，于是上网找了一下资料，整理了一下，这篇讲的是最大选择日期为当前日期，下一篇写不限制最大选择日期。 有点不知道怎么处理，试了好多次，大于10之前的数字如何在前面加0，如果加了判断的话，别的就会出问题。欢迎大佬指教 给出效果图： 贴出代码： wxml: &lt;view class="time_text"&gt;{{year}}-{{month}}-{{day}}&lt;/v...
嵌入页面的时间滚动选择器（picker-view）
最新发布
& 圆 。的博客
10-16 233
当需要对自定义选择的弹出方式和UI表现时，往往需要使用picker-view
PickerView 项目常见问题解决方案
gitblog_00422的博客
01-03 778
PickerView 项目常见问题解决方案 1. 项目基础介绍和主要编程语言 PickerView 是一个开源项目，提供了一种全新的选择器，可以用于省市区选择和各种层级数据的展示。它不仅限于省市区的选择，还适用于类似城市选择的层级形式，如电商菜单分类等。目前，PickerView 最多支持4级菜单。这个项目主要使用 Java 编程语言开发，适用于 Android 平台。 2. 新手在使用这个项目时...
微信小程序官方组件展示之表单组件picker-view源码
软件事业部的博客
09-20 977
源码官方组件能力，组件样式仅供参考，开发者可根据自身需求定义组件样式，具体属性参数详见小程序开发文档。1.tip: 滚动时在 iOS 自带振动反馈，可在系统设置 -> 声音与触感 -> 系统触感反馈中关闭。嵌入页面的滚动选择器。其中只可放置 picker-view-column组件，其它节点不会显示。以下将展示微信小程序之表单组件。
Vue.js列表选择器组件：vue-list-picker介绍与快速安装
资源摘要信息:"vue-list-picker是使用Vue.js框架开发的一个简单易用的列表选择器组件。该组件的主要目的是为了提供一个简洁的用户界面，使用户能够从一个列表中选择一个或多个选项。以下是关于vue-list-picker组件的...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值