微信小程式pick元件使用問題總結

寫本文主要的目的是,前段時間在寫小程式的時候,使用官方自帶的pick元件,使用region時遇到的問題.

. 這裡我建立了一個index目錄,該目錄下面建立好必備的檔案。這裡只會操作到.js和.wxml檔案。
第一種方案
wxml檔案新增如下內容

<view>
    <text>消費區域:</text>
    <picker value='{{region}}' mode='region' bindchange='bindRegionChange' custom-item=''>
      {{regionSelectText}}{{region}}
    </picker>
</view>

js檔案新增如下內容

Page({
  data: {
    'regionSelectText':'點選此處選擇區域',
    'region': ['廣東省', '廣州市', '海珠區'],
    'customItem':'全部'
  },
  bindRegionChange: function (e) {
    console.log(e.detail);
    this.setData({
      region: e.detail.value,
      regionSelectText: ''
    });
}});

第二種方案
wxml檔案新增如下內容

<view>
    <text>消費區域:</text>
    <picker value='{{region}}' mode='region' bindchange='bindRegionChange' custom-item=''>
      {{regionSelectText}}{{region[0]}}{{region[1]}}{{region[2]}}
    </picker>
</view>

js檔案新增如下內容

Page({
  data: {
    'regionSelectText':'點選此處選擇區域',
    'region': ['廣東省', '廣州市', '海珠區'],
    'customItem':'全部'
  },
  bindRegionChange: function (e) {
    console.log(e.detail);
    this.setData({
      region: e.detail.value,
      regionSelectText: ''
    });
}});

demo說明
1.頁面初始化regionSelectText引數，是因為頁面如果僅僅是新增pick元件，而pick元件中沒有內容，是無法觸發bindchange 事件的.
2.js中的e.detail.value返回的是一個陣列.
3.js初始化’region’: [‘廣東省’, ‘廣州市’, ‘海珠區’]是必須的.
4.第二種方法的wxml中是用來陣列的形式{{region[0]}},如果不直接寫{{region}},則系統預設使用陣列的形式,並且以中文的","隔開每個資料.