微信小程序開發之picker選擇器組件用法

picker組件時一個從底部彈起的可滾動的選擇器（嵌入頁面滾動器組件picker-view查看https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker-view.html），支持5種選擇器 ：
普通選擇器、多列、時間、日期和省市區 ， 通過mode區分 ， 默認是普通選擇器 (分別對應的mode值為selector，multiSelector，time,date和region)
例如 ：

<picker mode='selector' ></picker >

那怎么來實現一個普通的選擇器呢

 <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
    <view class="picker">
      當前選擇：{{array[index]}}
    </view>
  </picker>

bindchange 是value改變時觸發的事件 ， 通過event.detail.value獲取當前列表索引
value value 的值表示選擇了 range 中的第幾個（下標從 0 開始）
range 綁定的是一個數組類型的數據

選擇器觸發事件

bindPickerChange: function(e) {
    console.log('picker發送選擇改變，攜帶值為', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  }

需要在data中定義一個數組和下標

data:{
array: ['美國', '中國', '巴西', '日本'],
index:0
}

接下來 ，我們通過從后台接口動態獲取數據添加到選擇器，先看效果圖

視圖組件

<view class='flex-item title'>商戶名稱</view>
            <view class='shopname'>
              <picker bindchange="bindPickerChange" value="{{index}}" range="{{mchList}}" range-key='mchName'>
                <view class="flex picker">
                  <view class='flex-item'>{{mchList[index].mchName}}</view>
                  <view class='ic_arrow_right'><image src='../../images/ic_arrow_right.png'></image></view>
                </view>
              </picker>
            </view>

當我們的數據是一個數組對象時，需要用到range-key這個屬性 ， 通過它來指定數組對象中要顯示的數據
例如result數組對象形式如下

"result": [{
        "mchNumber": "v100000524665",
        "mchName": "test",
        "discount": 0.996
      }]

我們想要指定mchName來作為顯示器顯示內容
range-key='mchName'

定義數組mchList和下標index ，從第一個開始

data: {
    index: 0,
    mchList:[],//商戶
    mchNumber:'',
    discount: '',//系統參數折扣
  },

選擇器觸發事件 更新index當前下標

  bindPickerChange: function (e) {
    console.log(e.detail.value);
    var mchObj = this.data.mchList[e.detail.value];
    this.setData({
      index: e.detail.value,
      mchNumber: mchObj.mchNumber,
      discount: mchObj.discount
    })
  },

作者：fozero
聲明：原創文章，轉載請注明出處，謝謝！http://www.cnblogs.com/fozero/p/7887700.html
標簽：微信小程序