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

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

<view class="page">
  <view class="page-section">
    <input placeholder="请输入" value="{{value}}" class="queryInput" onInput='inputChange' />
    <picker onChange="pickerChange" value="{{index}}" range="{{array}}">
      <view class="row">
          <input placeholder="请输入" value="{{value}}" class="queryInput" onInput='inputChange' />
        <view class="row-extra">请选择：{{array[index]}}</view>
        <image class="row-arrow" src="https://img.alicdn.com/tfs/TB1oVprf4vbeK8jSZPfXXariXXa-48-48.png" mode="aspectFill" />
      </view>
    </picker>
  </view>
</view>

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

<view class="page">
  <view class="page-section">
    <input placeholder="请输入" value="{{value}}" class="queryInput" onInput='inputChange' />
      <picker onChange="pickerChange" value="{{index}}" range="{{array}}">
        <view class="row">
          <view class="row-extra">请选择：{{array[index]}}</view>
          <image class="row-arrow" src="https://img.alicdn.com/tfs/TB1oVprf4vbeK8jSZPfXXariXXa-48-48.png" mode="aspectFill" />
        </view>
      </picker>
      </view>
      </view>

然后设置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~完成~~

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