文档章节

微信小程序新增功能: 多列模式和省市区类型

小程序社区
 小程序社区
发布于 2017/07/14 15:41
字数 323
阅读 5
收藏 0

原文: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]]
    })
  }
})

picker_view

tip: 滚动时在iOS自带振动反馈,可在系统设置 -> 声音与触感 -> 系统触感反馈中关闭

© 著作权归作者所有

共有 人打赏支持
小程序社区
粉丝 17
博文 220
码字总数 382857
作品 0
武汉
私信 提问
微信小程序开发 (资料汇总,谁还没被坑过?希望助你绕过一些坑)

最近帮人家做一个微信小程序,刚好想熟悉一下。由于牵扯到多用户使用系统,以及数据共享,所以自然架构选择了,客户端和服务器的方式。 后台服务器是windows server,后台程序是.Net WebApi...

麦克*堂
09/05
0
0
JPress v1.0-rc1 发布,完善微信小程序 API 接口

JPress 正式进入 RC 阶段了。 接下来 JPress 的主要工作是和 微信小程序 对接,同时近期会放出 JPress微信小程序SDK,用户可以方便的通过 JPress微信小程序SDK 开发微信小程序,这个过程中S...

理工男海哥
10/19
0
0
JPress v1.0-rc.3 发布,类似 WordPress 的 Java 开源软件

JPress 是一个类似 WordPress 的Java开源软件,使用 Jfinal 和 Jboot 进行开发,支持对接微信小程序和微信公众号、同时支持 h5 独立模板(WordPress不支持哟)。 同时,在模板的支持上,JPr...

理工男海哥
10/29
0
0
微信小程序开发框架从入门到放弃

用框架是不可能用框架的,这辈子都不可能用框架。 微信小程序上手成本低,开发成本低,流量红利,推广成本低等等,很多公司的创业项目都会首选小程序来试水,小程序开发太火爆了,苦逼了前端工...

Runner羊
07/24
0
0
BookStack V1.3 发布,新增书签和阅读进度等功能

BookStack,分享知识,共享智慧!知识,因分享,传承久远! BookStack 是基于Mindoc开发的,为运营而生,可用于文档项目管理,也可用于开源书籍的整理并提供用户阅读,支持批量创建文档、mar...

皇虫
05/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

MariaDB 服务器在 MySQL Workbench 备份数据的时候出错如何解决

服务器是运行在 MariaDB 10.2 上面的,在使用 MySQL Workbench 出现错误: mysqldump: Couldn't execute 'SELECT COLUMN_NAME, JSON_EXTRACT(HISTOGRAM, '$."number-of-buckets-specified"'......

honeymose
今天
3
0
apache顶级项目(二) - B~C

apache顶级项目(二) - B~C https://www.apache.org/ Bahir Apache Bahir provides extensions to multiple distributed analytic platforms, extending their reach with a diversity of s......

晨猫
今天
6
0
day152-2018-11-19-英语流利阅读

“超级食物”竟然是营销噱头? Daniel 2018-11-19 1.今日导读 近几年来,超级食物 superfoods 开始逐渐走红。不难发现,越来越多的轻食餐厅也在不断推出以超级食物为主打食材的健康料理,像是...

飞鱼说编程
今天
14
0
SpringBoot源码:启动过程分析(二)

接着上篇继续分析 SpringBoot 的启动过程。 SpringBoot的版本为:2.1.0 release,最新版本。 一.时序图 一样的,我们先把时序图贴上来,方便理解: 二.源码分析 回顾一下,前面我们分析到了下...

Jacktanger
昨天
4
0
Apache防盗链配置,Directory访问控制,FilesMatch进行访问控制

防盗链配置 通过限制referer来实现防盗链的功能 配置前,使用curl -e 指定referer [root@test-a test-webroot]# curl -e "http://www.test.com/1.html" -x127.0.0.1:80 "www.test.com/1.jpg......

野雪球
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部