微信小程序picker组件下拉框选择input输入框的实例

实现效果图：

<view class="row-wrap">
     <view class="label">预约项目</view>
     <picker bindchange="bindCasPickerChange"value="{{casIndex1}}"range="{{casArray}}">
      <view>
       <text>{{casArray[casIndex]}}</text>
      </view>
 
     </picker>
    </view>
 
   </view>
<view class="section {{reply?'on':'off'}}">
    <input name="other"placeholder="请输入所预约项目"type="text"/>
  </view>

data: {
  nickName:"",
  avatarUrl:"",
  casArray: ['双眼皮','TBM','隆胸','减肥','手动输入'],
  userName:'',
  mobile:'',
  Gender:'female',
  casIndex: 0,
 },
 
 /**
 * 生命周期函数--监听页面加载
  */
 
 bindCasPickerChange:function(e) {
  console.log('乔丹选的是',this.data.casArray[e.detail.value])
  if(e.detail.value == 4) {
   this.setData({ reply: true})
  }else{
   this.setData({ reply: false})
  }
  this.setData({
   casIndex: e.detail.value
  })
 
 },

添加input框的样式

data: {
  nickName:"",
  avatarUrl:"",
  casArray: ['双眼皮','TBM','隆胸','减肥','手动输入'],
  userName:'',
  mobile:'',
  Gender:'female',
  casIndex: 0,
 },
 
 /**
 * 生命周期函数--监听页面加载
  */
 
 bindCasPickerChange:function(e) {
  console.log('乔丹选的是',this.data.casArray[e.detail.value])
  if(e.detail.value == 4) {
   this.setData({ reply: true})
  }else{
   this.setData({ reply: false})
  }
  this.setData({
   casIndex: e.detail.value
  })
 
 },

.section{

    font-size:28rpx;

    margin-left: 50rpx;

    margin-top: 30rpx;

   }

   .on{display: block}

   .off{display: none}




< view class= "headerline" >

< picker class= "picker" bindchange= "bindChange" value= "{{Index}}" range= "{{Data}}">

< view >

当前选择：{{Data[Index]}}

</ view >

</ picker >

< view >

< picker class= "pickerbox" style= ' padding-right: 14px;background: url("../../res/img/arrow.png") no-repeat right center transparent;' bindchange= "bindPickerChange" value= "{{index}}" range= "{{array}}" range-key= "name" >

< view class= "picker">

{{array[index].name}}

</ view >

</ picker >

</ view >

</ view >

Index: 0,

Data: [ '今天', '明天', '后天'],

array: [{ id: 0, value: '1', name: '今天' }, { id: 1, value: '2', name: '明天' }, { id: 2, value: '3',name: '后天' }],