微信小程序新增功能: 多列模式和省市区类型
来源:互联网 发布:站长工具域名查询 编辑:程序博客网 时间:2024/06/05 21:56
原文:http://www.wxapp-union.com/portal.php?mod=view&aid=2687
昨日,小程序开发者工具又更新啦!这次又推出了一些比较棒的功能,个人觉得这个省市区联动还是比较棒的,特此贴出源码供大家查看~
picker-view嵌入页面的滚动选择器
[图片上传中。。。(1)]
注意:其中只可放置
组件,其他节点不会显示。picker-view-column仅可放置于
中,其孩子节点的高度会自动设置成与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[2]] }) }})
tip: 滚动时在iOS自带振动反馈,可在系统设置 -> 声音与触感 -> 系统触感反馈中关闭
阅读全文
0 0
- 微信小程序新增功能: 多列模式和省市区类型
- 微信小程序新增功能: 多列模式和省市区类型
- 微信小程序新增“星标”功能
- SQL 新增列、删除列、改变列类型、添加列默认值、删除列默认值和获取列默认值的方法
- 微信小程序-省市区三级联动
- 微信小程序 三级联动省市区
- Oracle新增列和删除列语法
- 用sql 新增 列 修改类型 /重命名列名 删除
- Eclipse 的列模式和自动换行功能
- 微信小程序实用组件:省市区三级联动
- 微信小程序-实现省市区三级联动
- 小程序新增6大重大功能
- 微信:小程序新增“星标”功能
- 列类型和表类型
- SQL 新增/修改 表字段列的类型等
- TensorFlow 1.0 新增功能和部分改善
- 新增功能
- 浏览.NETFramework2.0类型库中新增的常用功能
- Mockplus推出真正无限制终身版,做原型就要一辈子!
- Mac下安装mysql5.7 完整步骤(图文详解)
- RMQ模板(不保证正确)
- Mysql数据库CPU占用达到80%的简单排查解决办法
- C语言里的EOF(结束程序)怎么用?
- 微信小程序新增功能: 多列模式和省市区类型
- 链表环的判断,是否相交
- unable to find SASL plugin: PLAIN kudu
- 【DFS】hdu 5167 Fibonacci
- 实现折叠式Toolbar:CollapsingToolbarLayout 使用完全解析
- 参考文献格式
- Java项目打包成exe的详细教程
- UILabel文字过长时的显示方式
- 自动截屏并上传脚本