小程序下拉框选择实例demo

需求分析：默认状态部门是请选择，当用户选择了对应的部门后，显示所选择的部门名称。

1.页面编辑

<view class="content">  
  <view class="demo-text-1" >*</view>  
  <view class="demo-text-2" > 部门：</view>  
  <view class="demo-text-3" >
  
  <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
  <text >{{bumeng}}</text>
  </picker>
 
   </view>  
   <view class="demo-text-4" > </view> 
</view>

　2.事件实现

在Page内定义数组

  data: {
    array: ['红色', '橙色', '黄色', '绿色', '青色', '蓝色', '紫色'],
    bumeng:'请选择部门',
    bumengid:''
  },

　　点击事件，选中后只能获取到数据索引，用获取的数据索引，给他们挨个判断进行赋值。

// 单列选择器
   bindPickerChange: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value);//index为数组点击确定后选择的item索引
    this.setData({
      bumengid:e.detail.value,
     

    })
    let bumengid=this.data.bumengid
    console.log("取出bumengid的值", bumengid)
    if(bumengid=='0'){
      this.setData({
        bumeng:'红色'
      })
      let bumeng=this.data.bumeng
      console.log("为0的时候", bumeng)
    }
    else if(bumengid=='1'){
      this.setData({
        bumeng:'橙色'
      })
    }
    else if(bumengid=='2'){
      this.setData({
        bumeng:'黄色'
      })
    }else if(bumengid=='3'){
      this.setData({
        bumeng:'绿色'
      })
    }else if(bumengid=='4'){
      this.setData({
        bumeng:'青色'
      })
    }else if(bumengid=='5'){
      this.setData({
        bumeng:'蓝色'
      })
    }else if(bumengid=='6'){
      this.setData({
        bumeng:'紫色'
      })
    }
 
  },