为了账号安全,请及时绑定邮箱和手机立即绑定

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

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
PHP开发工程师
手记
粉丝
56
获赞与收藏
375

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消