一开始是打算这样写, 直接用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~完成~~
注意:里面用了钉钉内置的样式方法,首先需要进入钉钉官方文档把表单的样式复制到自己的页面里面
请发表评论