小程序下拉框选择实例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:\'紫色\'
      })
    }
 
  },