钉钉小程序可输入的下拉框

一开始是打算这样写, 直接用input输入框把picker的前面替换了,但是这个时候点击输入框,,下拉框也会弹出来

  
    
    
      
          
        请选择：{{array[index]}}
        
      
    
  

本来想阻止事件默认行为,结果搞半天没弄好,,于是我 就换了一种思路,就是把input输入框和picker给分开写,代码如下

  
    
      
        
          请选择：{{array[index]}}
          
        
      
      
      

然后设置css样式,把picker放在右边就可以

.queryInput {
  width: 3.9rem;
  height: 0.9rem;
  padding-left: 0.3rem;
}

.row {
  line-height: 0.9rem;
  text-align: center;
  float: right;
}

然后就是js,钉钉官方给的都有方法可以获取和改变value值,代码如下

Page({
  data: {
    array: ['java', 'php', 'js', 'c++', 'python', 'go'],
    // 输入框的值
    value: '',
  },
  // 下拉选择框value发生改变时
  pickerChange(e) {
    console.log(this.data.array[e.detail.value]);
    this.setData({
      value: this.data.array[e.detail.value]
    })

  },
  // input框value发生改变时
  inputChange(e) {
    console.log(e.detail.value);

  },
})

ok~完成~~

注意:里面用了钉钉内置的样式方法,首先需要进入钉钉官方文档把表单的样式复制到自己的页面里面