微信小程序day03_05之form组件之picker普通选择器

文章目录

一. picker普通选择器

从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器。
普通选择器:mode = selector

常用属性如下
微信小程序day03_05之form组件之picker普通选择器
代码如下:

<picker mode="selector" range="{{array}}">
  我是普通选择器,传入数组
</picker>


<picker bindchange="changeFun" bindcancel="cancelFun" 
mode="selector" range="{{arrayObj}}" range-key="name">
   
    <view>{{showme}}</view>
</picker>
// pages/picker/picker.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
     array: [1,2,3,4,5,6,7,8,9,10,11,12],

    arrayObj:[
        {id:1001,name: "jack" },
        {id:1002,name: "lily" },
        {id:1003,name: "jay" },
        {id:1004,name: "mike" }
    ],
    showme: "请选择一个人名"

  },
  changeFun: function(e){
     var index= e.detail.value;
     console.log("index的下标为:" + index);

     var id=this.data.arrayObj[index].id;
     var name =this.data.arrayObj[index].name;
     
     this.setData({
       showme:  name 
     })

  },
  cancelFun: function(e){
     console.log("触发取消事件");
  }
})


显示效果如下:
点击我是普通选择器时,效果
微信小程序day03_05之form组件之picker普通选择器
点击请选择一个人名时, 效果如下:
微信小程序day03_05之form组件之picker普通选择器
点击取消和选择某个选项时,触发的事件.
微信小程序day03_05之form组件之picker普通选择器
点击完成后, 会显示选择的人名 .
微信小程序day03_05之form组件之picker普通选择器

上一篇:mui ios中form表单中点击输入框头部导航栏被推起及ios中form表单中同时存在日期选择及输入框时,日历选择页面错乱bug


下一篇:MacOS 开发 - NSDatePicker(日期选择)