文档章节

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

小程序社区
 小程序社区
发布于 2017/07/14 15:41
字数 323
阅读 4
收藏 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
BookStack V1.3 发布,新增书签和阅读进度等功能

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

皇虫
05/21
0
0
微信小程序开发框架从入门到放弃

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

Runner羊
07/24
0
0
走路带疯/wx_yq_mall

微信小程序商城【wxyqmall】 微信小程序商城,微信小程序微店,长期维护版本,欢迎大家踊跃提交贡献代码; 参与开发 更多项目请关注 https://gitee.com/TengWeiYun。 小程序开发 [微信:hq5...

走路带疯
08/31
0
0
小程序开放插件功能,共享开发时代已来

3月13日晚,沉寂许久的微信团队终于又迎来大更新:开放小程序插件功能,开发者工具新增“代码片段”功能。 新功能怎么理解?如何应用?对小程序开发者有什么影响?对小程序生态又将有什么影响...

天鸽小程序
03/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

12-利用思维导图梳理JavaSE-

12-利用思维导图梳理JavaSE- 主要内容 1.线程概念 2.线程开发 3.线程的状态 4.线程的同步和死锁 5.Java5.0并发库类 QQ/知识星球/个人WeChat/公众号二维码 本文为原创文章,如果对你有一点点的...

飞鱼说编程
9分钟前
0
0
JAVA集合之ArrayList

一、前言 Java 集合类提供了一套设计良好的支持对一组对象进行操作的接口和类,JAVA常用的集合接口有4类,分别是: Collection:代表一组对象,每一个对象都是它的子元素 Set:不包含重复元素...

木木匠
30分钟前
1
0
转:XMLHttpRequest2 新技巧

”XMLHttpRequest 的异步调用网上找的例子运行没问题,但稍微改了一点点就报错”InvalidStateError: XMLHttpRequest has an invalid context“。断断续续 搞了3天终于通了,可以接收二进制文...

SamXIAO
49分钟前
2
0
=====D服务器定时任务=====

Linux定时任务 crontab linux系统是有cron这个系统服务来控制的,Liunx系统上包含很多的计划性工作,使用者自己可以设置计划任务,所以linux系统提供了使用者控制计划任务的命令 crontab的启...

覃光林
58分钟前
1
0
xilinx资源

本系列教学视频由赛灵思高级战略应用工程师带领你:从零开始,一步步深入 掌握 HLS 以及 UltraFAST 设计方法,帮助您成为系统设计和算法加速的大拿! http://www.eetrend.com/topics/2018-0...

whoisliang
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部