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

来源:互联网 发布:站长工具域名查询 编辑:程序博客网 时间: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]]    })  }})

picker_view

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

原创粉丝点击