釘釘小程序可輸入的下拉框

一開始是打算這樣寫, 直接用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~完成~~

注意:里面用了釘釘內置的樣式方法,首先需要進入釘釘官方文檔把表單的樣式復制到自己的頁面里面