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

实现效果图：

    预约项目                    {{casArray[casIndex]}}

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: '后天' }],