文档章节

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

小程序社区
 小程序社区
发布于 2017/07/14 15:41
字数 323
阅读 6
收藏 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自带振动反馈,可在系统设置 -> 声音与触感 -> 系统触感反馈中关闭

© 著作权归作者所有

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

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

麦克*堂
2018/09/05
0
0
uni-app 1.4 发布,一套代码,发行小程序(微信/支付宝/百度)、H5、App多个平台

在2019新年到来之际, 1.4版本正式发布,新增支持百度、支付宝小程序,开放插件市场,同时注入更多优秀特性,为开发者送上了一份新年大礼! 支持更多小程序平台 1.4 版本新增支持百度、支付宝...

CHB
01/03
0
0
JPress v1.0-rc1 发布,完善微信小程序 API 接口

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

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

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

理工男海哥
2018/10/29
857
6
微信小程序又有新功能,这次变得更好玩了!

微信小程序又有新功能,这次变得更好玩了! 一段时间不见的、来自微信官方的、让小编忍不住翻白眼的大招再次重现,这次小程序又带来两个新能力:录音、拍照、视频播放等多媒体能力全面升级;...

湃点科技
2017/12/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

IDE 插件新版本发布,开发效率 “biu” 起来了

近日,Cloud Toolkit正式推出了面向 IntelliJ 和 Eclipse 两个平台的新款插件,本文挑选了其中三个重大特性进行解读,点击文末官网跳转链接,可查看详细的版本说明。 本地应用一键部署到任何...

阿里云官方博客
42分钟前
4
0
我是怎样和Linux系统结缘并通过红帽RHCE认证的

我高考完当时就是选择的计算机科学与技术专业,上大学以后联想到的和计算机相关的就只有写代码,开发,网站,网页设计,就没有其他的了,当时学习写代码也都是在Windows上,什么C#、C++之类的...

linuxprobe16
43分钟前
1
0
Coding and Paper Letter(四十四)

资源整理。 1 Coding: 1.Rstudio2019年会“机器学习应用”的幻灯片,代码和数据 rstudio conf 2019 2.R语言包sparkxgb,Spark上XGBoost的R接口。 sparkxgb 3.自动SQL注入和数据库接管工具。 ...

胖胖雕
今天
4
0
Ubuntu最新的主要操作系统放弃32位支持?

现在是2018年,2019年即将到来——64位处理器已经成为主流很长一段时间了。如果你仍然使用32位的电脑,那么是时候把它扔进垃圾箱了。 我为所有基于Linux的操作系统维护者感到自豪,他们有勇气...

Linux就该这么学
今天
3
0
Fundebug发布Vue插件,简化BUG监控接入代码

摘要: 代码越短越好! 我们发布了fundebug-vue插件,可以简化Vue框架接入Fundebug的代码。 Vue如何接入Fundebug 1. 安装fundebug-javascript与fundebug-vue npm install fundebug-javascrip...

Fundebug
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部