微信小程序 picker-view 组件详解及简单实例
作者:lqh 时间:2024-04-19 09:44:13
picker-view
相关文章:
微信小程序 Button
微信小程序 radio
微信小程序 slider
微信小程序 switch
微信小程序 textarea
微信小程序 picker-view
微信小程序 picker
微信小程序 label
微信小程序 input
微信小程序 form
微信小程序 checkbox
实现效果图:
嵌入页面的滚动选择器
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
value | Number Array | 数组中的数字依次表示 picker-view 内的 picker-view-colume 选择的第几项(下标从 0 开始),数字大于 picker-view-column 可选项长度时,选择最后一项。 | |
indicator-style | String | 设置选择器中间选中框的样式 | |
bindchange | EventHandle | 当滚动选择,value 改变时触发 change 事件,event.detail = {value: value};value为数组,表示 picker-view 内的 picker-view-column 当前选择的是第几项(下标从 0 开始) |
注意:其中只可放置<picker-view-column/>
组件,其他节点不会显示。
picker-view-column
仅可放置于<picker-view />
中,其孩子节点的高度会自动设置成与picker-view的选中框的高度一致
示例代码:
<view>
<view>{{year}}年{{month}}月{{day}}日</view>
<picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange">
<picker-view-column>
<view wx:for="{{years}}" style="line-height: 50px">{{item}}年</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{months}}" style="line-height: 50px">{{item}}月</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{days}}" style="line-height: 50px">{{item}}日</view>
</picker-view-column>
</picker-view>
</view>
const date = new Date()
const years = []
const months = []
const days = []
for (let i = 1990; i <= date.getFullYear(); i++) {
years.push(i)
}
for (let i = 1 ; i <= 12; i++) {
months.push(i)
}
for (let i = 1 ; i <= 31; i++) {
days.push(i)
}
Page({
data: {
years: years,
year: date.getFullYear(),
months: months,
month: 2,
days: days,
day: 2,
year: date.getFullYear(),
value: [9999, 1, 1],
},
bindChange: function(e) {
const val = e.detail.value
this.setData({
year: this.data.years[val[0]],
month: this.data.months[val[1]],
day: this.data.days[val[1]]
})
}
})
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
标签:微信小程序,picker-view
0
投稿
猜你喜欢
MySQL常用基本SQL语句总结
2024-01-28 06:39:43
解读SQL一些语句执行后出现异常不会回滚的问题
2024-01-22 12:52:59
详解Go语言中单链表的使用
2024-02-01 11:55:03
Python clip与range函数保姆级使用教程
2022-05-22 09:53:42
php动态生成版权所有信息的方法
2024-05-02 17:17:30
基于scrapy的redis安装和配置方法
2022-07-15 17:26:56
python实现彩色图转换成灰度图
2022-03-11 02:41:30
pycharm from lxml import etree标红问题及解决
2021-12-10 05:55:38
Matplotlib 生成不同大小的subplots实例
2022-12-22 03:16:26
MSSQL2000安全设置图文教程
2024-01-13 22:16:35
Python 炫技操作之合并字典的七种方法
2022-07-16 05:56:12
使用Python中PIL库给图片添加文本水印
2021-09-07 19:09:52
Python中搜索和替换文件中的文本的实现(四种)
2022-04-23 01:03:39
MySQL(win7x64 5.7.16版本)下载、安装、配置与使用的详细图文教程
2024-01-27 01:12:32
python程序 线程队列queue使用方法解析
2021-11-16 18:43:02
Django中Middleware中的函数详解
2023-08-30 06:58:30
python 判断是否为正小数和正整数的实例
2022-06-12 01:26:04
使用python无账号无限制获取企查查信息的实例代码
2021-09-23 20:26:10
一文详解CNN 解决 Flowers 图像分类任务
2023-02-28 22:23:39
PyQt5每天必学之QSplitter实现窗口分隔
2021-12-26 16:33:48