適用場景

1、省市三級聯動
2、出生日期選擇
3、性別選擇
4、一般性的下拉選擇等

一、省市三級聯動使用

注意mode = region，以及value = “一維陣列”

//.wxml
<picker mode="region" bindchange="bindViewEvent" data-model="component" 
data-method="bindSelect" data-name="region" value="{{region}}" custom-item="{{customItem}}">
<view class="picker">
      當前選擇：
 
{{region[0]}}，{{region[1]}}，{{region[2]}}
</view>
</picker>

二、出生日期選擇

注意mode = date，以及value = “日期字串”

<picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindViewEvent" data-model="component" data-method="bindSelect" date-mode="date" data-name="date">
    <
 
view class="picker">
    {{date}}
    </view>
</picker>

三、性別選擇

注意，不填mode預設為selector，range=”一維陣列”，value=”當前選中索引”

<picker bindchange="bindViewEvent" data-model="component" data-method="bindSelect" data-name="index"  value='{{index}}' range="{{gender}}">
    <view class="label-right"
 
>
        {{gender[index]}}
    </view>
</picker>

以上都需要在.js裡設定相關初始變數！

//.js
 var app = getApp();

 data: {

    region:['河北','滄州','河間'],
    date:'2010-10-10',
    gender:['男','女'],
    index:0
 },

 bindViewEvent:function(e){

    app.process(this,e);    
 }

相關js類

//component.js
const select = require('../component/select.js');
const upload = require('../component/upload.js');

class component{

  constructor(com, that) {

    this.com = com;
    this.that = that;
  }

  //繫結下拉框選擇事件
  bindSelect(data){

    let self = this;

    let mode = data.currentTarget.dataset.mode;

    let name = data.currentTarget.dataset.name;

    let picker = new select({
      that: self.that,
      mode: mode,
      name: name
    });

    picker.change(data.detail.value);
  }

  //點選事件，傳遞引數為e.currentTarget.dataset
  bindImageChoose(data){

    //圖片上傳
    this.uploader = new upload({
      that: that,
      name: data.name,
      mode: data.mode,
      count: data.count || 9
    });

    this.uploader.choose();
  }

  bindImageDel(data){

    //圖片上傳
    this.uploader = new upload({
      that: that,
      name: data.name,
      mode: data.mode,
      count: data.count || 9
    });

    this.uploader.del(data.index);
  }

}
module.exports = component;


//select.js
/*
* 下拉框物件
*/
class picker{

  constructor(data){

    this.that = data.that;
    this.name = data.name || 'date';
    this.mode = data.mode || 'selector';
  }

  show(name,data){

    let view = {};
    view[name] = data;

    this.that.setData(view);
  }

  change(data){

    let self = this;

    self.show(self.name, data);
  }
}
module.exports = picker;

//upload.js
class picUploader {

  constructor(data) {

    this.that = data.that;
    this.name = data.name;
    this.mode = data.mode || 1;
    this.count = this.model == 1 ? 1 : data.count || 9;
  }

  /*
  * 選擇圖片
  */
  choose() {

    const self = this;

    wx.chooseImage({
      count: (self.count - self.that.data[self.name].length),
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {
        var tempFilePaths = res.tempFilePaths;

        self.append(tempFilePaths);
      }
    })
  }

  /*
  * 顯示圖片
  */

  show() {

    let self = this;
    let view = {};
    view[self.name] = self.that.data[self.name];

    self.that.setData(view);

  }

  /*
  * 追加圖片
  */
  append(data) {

    const self = this;
    for (let i = 0; i < data.length; i++) {

      self.that.data[self.name].push(data[i]);
    }

    self.show();
  }

  /*
  * 刪除圖片
  */
  del(index) {

    let self = this;

    self.that.data[self.name].splice(index, 1);

    self.show();
  }


}
module.exports = picUploader;