微信小程序pick组件使用问题总结

Mandy的名字被占用了

发布于 2019-07-24 11:52:56

9630

发布于 2019-07-24 11:52:56

写本文主要的目的是,前段时间在写小程序的时候,使用官方自带的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}},则系统默认使用数组的形式,并且以中文的","隔开每个数据.

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2019-03-09，如有侵权请联系 cloudcommunity@tencent.com 删除

xml