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

柔光的暖阳◎ 2022-02-28 12:50 384阅读 0赞

### 文章目录 ###

*   *   *  一. picker普通选择器

### 一. picker普通选择器 ###

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

常用属性如下  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70][]  
代码如下:

<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("触发取消事件");
      }
    })

显示效果如下:  
点击我是普通选择器时,效果  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1][]  
点击请选择一个人名时, 效果如下:  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 2][]  
点击取消和选择某个选项时,触发的事件.  
![20190325203111177.png][]  
点击完成后, 会显示选择的人名 .  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70]: /images/20220228/706e9afc1084416da356a394f2ba8cf0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1]: /images/20220228/f8c56c8e61864bdfa7eebad630f374d2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 2]: /images/20220228/3a8dcee0808440ada264a0fdd213b1ff.png
[20190325203111177.png]: /images/20220228/9599e9bac37e46618b913980680d1ed8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 3]: /images/20220228/b8ffa84b6a11405bbe50fb0e61f348af.png