uni-app实现select可输入下拉框
<p>1、一般uni-app下拉框</p><div class="cnblogs_code">
<pre><view <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">uni-form-item uni-column</span><span style="color: rgba(128, 0, 0, 1)">"</span>>
<picker @change=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">examinationType</span><span style="color: rgba(128, 0, 0, 1)">"</span> :range=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">examinationTypeArray</span><span style="color: rgba(128, 0, 0, 1)">"</span>>
<label <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">""</span>>{{ examinationTypeArrayType }}</label>
</picker>
</view></pre>
</div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">下拉框初始数据</span>
examinationTypeArray: [<span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">请选择</span><span style="color: rgba(128, 0, 0, 1)">'</span>, <span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">11111</span><span style="color: rgba(128, 0, 0, 1)">'</span>, <span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">22222</span><span style="color: rgba(128, 0, 0, 1)">'</span>, <span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">33333</span><span style="color: rgba(128, 0, 0, 1)">'</span>, <span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">44444</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">],
examinationTypeIndex: </span><span style="color: rgba(128, 0, 128, 1)">0</span><span style="color: rgba(0, 0, 0, 1)">,
examinationTypeArrayType: </span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">请选择</span><span style="color: rgba(128, 0, 0, 1)">'</span>,</pre>
</div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">examinationType(e) {
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.examinationTypeIndex =<span style="color: rgba(0, 0, 0, 1)"> e.target.value;
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.examinationTypeArrayType = <span style="color: rgba(0, 0, 255, 1)">this</span>.examinationTypeArray[<span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.examinationTypeIndex];
},</span></pre>
</div>
<p>2、要实现select可输入下拉选择框，使用uni-combox组合框</p>
<div class="cnblogs_code">
<pre><uni-combox :border=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">false</span><span style="color: rgba(128, 0, 0, 1)">"</span> @input=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">selectname</span><span style="color: rgba(128, 0, 0, 1)">"</span> :candidates=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">candidates</span><span style="color: rgba(128, 0, 0, 1)">"</span>placeholder=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">请选择姓名</span><span style="color: rgba(128, 0, 0, 1)">"</span>></uni-combox></pre>
</div>
<p>uni-app项目uni_modules文件夹中要包含uni-card文件、uni-combox文件、uni-icons文件以及uni-scss文件，</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">初始化数据</span>
candidates: [], <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">可输入下拉框数据</span></pre>
</div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">姓名</span>
<span style="color: rgba(0, 0, 0, 1)">selectname(name) {
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.Name =<span style="color: rgba(0, 0, 0, 1)"> name;
},</span></pre>
</div>
<p> </p><br><br>
来源：https://www.cnblogs.com/debstu/p/15924086.html
頁:
[1]