文档章节

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

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

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

皇虫
05/21
0
0
小程序开放插件功能,共享开发时代已来

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

天鸽小程序
03/14
0
0
wx-jq:一套完全原创的微信小程序插件集合库

wx-jq (一套完全原创的微信小程序插件集合库) 微信小程序插件,微信小程序组件,微信小程序插件集合,微信小程序组件集合,微信小程序插件学习,微信小程序插件开发, 在线演示: 下载地址...

透笔度
01/25
644
2
微信小程序最新盈利模式 您的企业或店铺是否已经开启?

今年以来,新零售备受瞩目,但是绝大部分人仍然不清楚马云所指的“五新”具体是什么,但理解了小程序,似乎新零售三个字,理解起来就简单多了。 今年3月腾讯的两会媒体沟通会上,马化腾就曾谈...

速成应用小程序平台
05/31
0
0
iWebShop 开源商城全新后台 UI 发布

好商城就要免费用!iWebShop开源系统免费使用~全新后台UI靓丽登场! 更新信息请关注:http://www.aircheng.com 新增部分 新增城市定位接口 IClient::getLocal(); 新增积分兑换商品功能 新增s...

north
05/31
0
0
Taro实践 - 快速开发【知乎】多端应用

来自团队小伙伴 - 阿集,关于 Taro 上手实践的一篇文章,希望对大家的使用有所帮助。 1. Taro 简介 是由凹凸实验室打造的一套遵循 语法规范的多端统一开发框架。 使用 ,我们可以只书写一套代...

凹凸实验室
06/27
0
0
开发了几个小程序后,说说我对小程序的看法

刚看到新闻,微信小程序MAU高达4.7亿,TOP100小游戏占比28% 小程序从发布前的大众期待,到刚发布时成为热点,再到迅速被人遗忘,再到后来慢慢发力缓慢爬坡 现在与一年前已经是完全不一样的情...

codeGoogle
05/23
0
0
迅速上手:使用taro构建微信小程序基础教程

前言 由于微信小程序在开发上不能安装npm依赖,和开发流程上也饱受诟病;Taro 是由京东·凹凸实验室(aotu.io)倾力打造的 多端开发解决方案,它的api基于react,在本篇文章中主要介绍了使用t...

mytac
07/18
0
0
分享几个微信小程序开发框架和工具

###【小程序开发框架】 1、官方框架MINA 小程序提供的开发框架为MINA框架,它类似于淘宝Weex、Vue框架。MINA框架通过封装微信客户端提供的文件系统、网络通信、任务管理、数据安全等基础功能...

codeGoogle
04/18
0
0
"口令红包"-利用函数计算构建微信小程序的server端

前言 函数计算 阿里云函数计算是一个事件驱动的全托管计算服务。通过函数计算,您无需管理服务器等基础设施,只需编写代码并上传。函数计算会为您准备好计算资源,以弹性、可靠的方式运行您的...

rsong
02/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

单身税的时代就要来临,你还没有用Python帮你找一个女朋友吗?

单身税的历史可以追溯到2015年韩国的新政, 低生育率逼得韩国产生了这一政策。 现在我国也要实行这一政策, 很多单身狗就接受不了了 很可惜,国家不包分配对象, 男的都说找对象难, 有没有向...

猫咪编程
17分钟前
0
0
Java中 发出请求获取别人的数据(阿里云 查询IP归属地)

1.效果 调用阿里云的接口 去定位IP地址 2. 代码 /** * 1. Java中远程调用方法 * http://localhost:8080/mavenssm20180519/invokingUrl.action * @Title: invokingUrl * @Description: * @ret......

Lucky_Me
21分钟前
0
0
protobuf学习笔记

相关文档 Protocol buffers(protobuf)入门简介及性能分析 Protobuf学习 - 入门

OSC_fly
昨天
0
0
Mybaties入门介绍

Mybaties和Hibernate是我们在Java开发中应用的比较多的两个ORM框架。当然,目前Mybaties正在慢慢取代Hibernate,这是因为相比较Hibernate而言Mybaties性能更好,响应更快,更加灵活。我们在开...

王子城
昨天
0
0
编程学习笔记之python深入之装饰器案例及说明文档[图]

编程学习笔记之python深入之装饰器案例及说明文档[图] 装饰器即在不对一个函数体进行任何修改,以及不改变整体的原本意思的情况下,增加函数功能的新函数,因为这个新函数对旧函数进行了装饰...

原创小博客
昨天
0
0
流利阅读笔记33-20180722待学习

黑暗中的生物:利用奇技淫巧快活生存 Daniel 2018-07-22 1.今日导读 如果让你在伸手不见五指的黑暗当中生存,你能熬过几天呢?而大千世界,无奇不有。在很多你不知道的角落,有些生物在完全黑...

aibinxiao
昨天
5
0
Hystrix降级逻辑中如何获取触发的异常

通过之前Spring Cloud系列教程中的《Spring Cloud构建微服务架构:服务容错保护(Hystrix服务降级)》一文,我们已经知道如何通过Hystrix来保护自己的服务不被外部依赖方拖垮的情况。但是实际...

程序猿DD
昨天
0
0
gin endless 热重启

r := gin.New()r.GET("/", func(c *gin.Context) {c.String(200, config.Config.Server.AppId)})s := endless.NewServer(":8080", r)s.BeforeBegin = func(add string) ......

李琼涛
昨天
0
0
JAVA模式之代理模式

平时一直在用spring,spring中最大的特效IOC和AOP,其中AOP使用的就是代理模式.闲着无聊,随手写了一个代理模式,也记录下代理模式的实现Demo. 比如现在有一个场景是:客户想要增加一个新的功能,...

勤奋的蚂蚁
昨天
0
0
ES15-JAVA API 索引管理

1.创建连接 创建连接demo package com.sean.esapi.client;import java.net.InetSocketAddress;import org.elasticsearch.action.get.GetResponse;import org.elasticsearch.clien......

贾峰uk
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部