微信小程序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}},则系统默认使用数组的形式,并且以中文的","隔开每个数据.