首页 > 编程语言 >微信小程序picker组件使用示例

微信小程序picker组件使用示例

时间:2022-09-20 09:57:10浏览次数:60  
标签:picker index 示例 微信 value text id

示例:

wxml页面:

 <picker name="picker_machine11" class="cybm_pic_1" range="{{categoryList}}" value="{{'categoryid'}}" range-key='name' bindchange="bindChangeCate">
        <span class="picker">
          <view class='flex-item'>{{showCategory}}</view>
        </span>
      </picker>

其中,range是数组类型:[{id:'',name:''}],value为选中后的值,range-key为显示字段,bindchange为绑定事件,绑定事件写法如下:

bindChangeCate: function (e) {
    let index = e.detail.value;
    let text = this.data.categoryList[index].name;
    if (text == '全部') {
      text = '职位类型'
    }
    this.setData({
      cate_index: e.detail.value,
      showCategory: text + '⏷',
      categoryid: this.data.categoryList[index].id
    });
    //查询事件写在此处
  },

 

标签:picker,index,示例,微信,value,text,id
From: https://www.cnblogs.com/jizhong/p/16709988.html

相关文章

  • 微信公众号如何上传附件文件
    说到微信公众号,相信大家都非常熟悉。微信公众号是开发者或商家在微信公众平台上申请的应用账号,该账号与QQ账号互通,平台上实现和特定群体的文字、图片、语音、视频的全方位......
  • groovy 检测git提交信息并推送到企业微信
    目录groovy检测git提交信息并推送到企业微信groovy检测git提交信息并推送到企业微信packagecommon.ecsimportgroovy.json.JsonSlurperClassicimportjava.time.L......
  • 【Azure 事件中心】Flink消费Event Hub中事件, 使用Azure默认示例代码,始终获取新产生
    问题描述根据AzureEventHub示例文档,[将ApacheFlink与适用于ApacheKafka的Azure事件中心配合使用],配置好 consumer.config文件后,为什么不能自动消费EventHub......
  • 微信小程序防止事件穿透防止事件冒泡
    绑定并阻止事件冒泡除bind外,也可以用catch来绑定事件。与bind不同,catch会阻止事件向上冒泡。例如在下边这个例子中,点击innerview会先后调用handleTap3和handl......
  • ckeditor粘贴word文档图片的示例
    ​ 在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题,于是各种网上扒拉,终于找到解决方案,在这里感谢一下知乎中众大神以及TheViper。通过知乎提供的思路找到粘......
  • 2022-09-19 微信小程序关了调试没数据
    问题描述:打开调试,真机测试和开发工具测试都有值,关闭调试有部分值没有返回。原因:有个域名没有在微信公众平台配置。解决方案:打开微信公众平台==》开发设置==》服务器域名,......
  • ios微信内置浏览器播放音乐
    <!DOCTYPEhtml><htmllang=""> <head>  <metacharset="utf-8"/>  <metahttp-equiv="X-UA-Compatible"content="IE=edge"/>  <metaname="viewp......
  • GFM语法个人简介示例
    个人简介基本信息姓名:曾强年龄:20岁职业:攻城狮爱好:看电影、听音乐、喝咖啡抽烟、喝酒、烫头(头发没了)人生格言:机会总是留给有准备的人。时时居先,方可快......
  • 微信浏览器自动播放音乐的解决方法 , 安卓和ios 22年9月发布
      <audioid="music1"preoloadautoplay>   <sourcesrc="./all-01.mp3"type="audio/mp3"/>  </audio><scriptsrc="./pixi.min.js"></script>......
  • 微信小程序--云开发
    介绍微信云开发是微信团队联合腾讯云推出的专业的小程序开发服务。开发者可以使用云开发快速开发小程序、小游戏、公众号网页等,并且原生打通微信开放能力。开发者无需搭......