微信小程序 picker-从底部弹起的滚动选择器
2023-02-18 16:30:16 时间
效果图
官方文档链接
wxml
<view>普通选择器:请选择选项</view>
<!--
mode默认值selector 普通选择器
range数据源(mode 为 selector 或 multiSelector 时有效)
value表示选择了数据源中的第几个值(下标从0开始)
bindchange事件value改变时触发
-->
<picker mode="selector" range="{{array}}" value="{{index}}" bindchange="changeValue">
<text>{{array[index]}}</text>
</picker>
<view>时间选择器:请选择时间</view>
<!--
mode=time 时间选择器
value 表示选中的时间 格式"hh:mm"
start 有效时间范围的开始
end 有效时间范围的结束
bindchange事件value改变时触发
-->
<picker mode="time" value="{{time}}" start="06:00" end="24:00" bindchange="changeTime">
<text>{{time}}</text>
</picker>
<view>日期选择器:请选择日期</view>
<!--
mode =date 日期选择器
value 表示选中的日期 格式"YYYY-MM-DD"
start 有效日期范围的开始
end 有效日期范围的结束
bindchange事件value改变时触发
-->
<picker mode="date" value="{{date}}" start="2000-1-1" end="2050-1-1" bindchange="changeDate">
<text>{{date}}</text>
</picker>
JS
Page({
data: {
//普通选择器数据
array:['选项一', '选项二', '选项三'],
//普通选择器值索引
index: 0,
//时间选择器默认值
time: '9:30',
//日期选择器默认值
date: '2020-8-21'
},
//普通选择器值改变时触发
changeValue(e) {
this.setData({
index: e.detail.value
})
},
//时间选择器值改变时触发
changeTime(e) {
this.setData({
time: e.detail.value
})
},
//日期选择器值改变时触发
changeDate(e) {
date: e.detail.value
}
})
相关文章
- 7 Papers & Radios | 扩散模型只用文字PS照片;MIT泊松流生成模型击败扩散模型
- 7 Papers & Radios | ECCV 2022最佳论文;Transformer在试错中自主改进
- 7 Papers & Radios | 用神经网络推开数学推理大门;世界首个宏基因组蛋白质图谱
- 找对方法,微信小程序直接转APP!
- 小程序容器技术发展的新高度
- 一文直击什么是小程序插件。
- 小程序容器的神奇之处
- java和vue开发的二手车小程序系统租车小程序系统
- 老人新兵 —— 一款 iOS APP 的开发手记
- 7 Papers & Radios | 谷歌推出DreamBooth扩散模型;张益唐零点猜想论文出炉
- 7 Papers & Radios | Stable Diffusion采样速度翻倍;MIT解决神经网络百年难题
- uniapp云打包,使用push时候提示:Android包名和DCloud UniPush插件绑定的不一致,请确认【已解决】
- 【凯哥领券网】外卖领红包小程序(美团、饿了么)部署时候遇到问题记录
- 7 Papers & Radios | NeurIPS'22获奖论文;英伟达一句话生成3D模型
- 【已解决】SpringBoot项目bootstrap.yml配置文件不加载
- 微信h5跳转小程序wx-open-launch-weapp开放标签不显示(已解决)
- uni-app&H5&Android混合开发三 || uni-app调用Android原生方法的三种方式
- .NET生成小程序码,并合自定义背景图生成推广小程序二维码
- uni-app&H5&Android混合开发二 || 使用Android Studio打包应用APK
- 【新手指南】Android Studio中应用App的相关配置