小程序学习之旅---表单组件 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);
  }  
})