小程序学习之旅---表单组件 picker picker-view 实现日期 区域 联动选择

Page({
  /**
   * 页面的初始数据
   */
  data: {
    cityList: ['北京', '上海', '深圳', '广州'], 
    cityIndex: 1, 
    time: '17:01', 
    date: '2018-6-28', 
    customItem: "全部", 
    region: ['广东省', '深圳市', '宝安区']
  },
  bindCityChange(e){
  //e.detail.value 选中的索引值
    this.setData({
      cityIndex: e.detail.value
    })
  },
  bindTimeChange(e){
   
    this.setData({
      time: e.detail.value
    })
  },
  bindRegionChange(e) {
    console.log(e.detail.value);
    this.setData({
      region: e.detail.value
    })
  }
})
<!--pages/picker/picker.wxml-->
  <picker bindchange="bindCityChange" value="{{cityIndex}}" range="{{cityList}}">
    <view class="picker">
      选择城市:{{cityList[cityIndex]}}
    </view>
  </picker>
<picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
    <view class="picker">
      当前时间: {{time}}
    </view>
  </picker>
 <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
    <view class="picker">
      日期选择: {{date}}
    </view>
  </picker>
  <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
    <view class="picker">
      选择省市区:{{region[0]}},{{region[1]}},{{region[2]}}
    </view>
  </picker>
<!--pages/picker/picker.wxml-->
  <picker bindchange="bindCityChange" value="{{cityIndex}}" range="{{cityList}}">
    <view class="picker">
      选择城市:{{cityList[cityIndex]}}
    </view>
  </picker>
<picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
    <view class="picker">
      当前时间: {{time}}
    </view>
  </picker>
 <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
    <view class="picker">
      日期选择: {{date}}
    </view>
  </picker>
  <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
    <view class="picker">
      选择省市区:{{region[0]}},{{region[1]}},{{region[2]}}
    </view>
  </picker>
 <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
    <view class="picker">
      当前选择:{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}}
    </view>
  </picker>
// pages/picker/picker.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    cityList: ['北京', '上海', '深圳', '广州'], 
    cityIndex: 1, 
    time: '17:01', 
    date: '2018-6-28',  
    customItem: "全部", 
    region: ['广东省', '深圳市', '宝安区'],    
    multiArray: [['宝马', '大众', '奥迪'], ['宝马1', '宝马2', '宝马3', '宝马4']],
    multiIndex: [0, 0]
  },
  //普通选择器
  bindCityChange(e){
  //e.detail.value 选中的索引值
    this.setData({
      cityIndex: e.detail.value
    })
  },
  bindTimeChange(e){
   
    this.setData({
      time: e.detail.value
    })
  },
  bindRegionChange(e) {
    console.log(e.detail.value);
    this.setData({
      region: e.detail.value
    })
  }
  ,
  bindMultiPickerChange(e) {
    console.log(e.detail.value);
    this.setData({
      multiIndex: e.detail.value
    })
  },
  bindMultiPickerColumnChange: function (e) {
    console.log('修改的列为', e.detail.column, ',值为', e.detail.value);
    var data = {
      multiArray: this.data.multiArray,
      multiIndex: this.data.multiIndex
    };
    data.multiIndex[e.detail.column] = e.detail.value; //multiIndex: [0, 0]
    if (e.detail.column==0){  /*第一列改变*/
        //获取第一列选中的值   e.detail.value
      if (e.detail.value==0){
        data.multiArray[1] = ['宝马1', '宝马2', '宝马3', '宝马4'];
      } else if (e.detail.value == 1){
        data.multiArray[1] = ['大众1', '大众2', '大众3', '大众4'];
      }else{
        data.multiArray[1] = ['奥迪1', '奥迪2', '奥迪3', '奥迪4'];
      }
    }
    //改变data里面的值
    this.setData(data);
  }  
})

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

瑞朋哥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值