技术博客——uni-app combox组件的调整和使用

[081800438-谢靖怡]

这个作业属于哪个课程	软件工程实践2022年春-F班
这个作业要求在哪里	软件工程实践总结&个人技术博客
这个作业的目标	技术博客
其他参考文献	《构建之法》

目录

• 技术概述
• 技术详述
• 遇到的问题和解决过程
• 总结
• 参考文档

技术概述

uni-app提供的combox组合框在实际应用中与需求出现偏差，效果不佳，在微信开发者工具调试和真机调试中出现BUG，对组件源代码进行修改以达到更好的适配。

技术详述

1、将combox组合框导入HbuildX

2、这个组合框有个BUG是选中某个选项后，需要手动清除选项后才可以选择另外的选项，不太符合使用习惯，查看并修改部分源代码

<view class="uni-combox__input-box">
            <input class="uni-combox__input" type="text" :placeholder="placeholder" v-model="inputVal" @input="onInput" @focus="onFocus" @blur="onBlur" />
            <uni-icons class="uni-combox__input-arrow" :type="showSelector ? 'arrowup' : 'arrowdown'" size="14" @click="toggleSelector"></uni-icons>
            <view class="uni-combox__selector" v-if="showSelector">
                <scroll-view scroll-y="true" class="uni-combox__selector-scroll">
                    <view class="uni-combox__selector-empty" v-if="filterCandidatesLength === 0">
                        <text>{{emptyTips}}</text>
                    </view>
                    <view class="uni-combox__selector-item" v-for="(item,index) in newSelectorCandidates" :key="index" @click="onSelectorClick(index)">
                        <text :class="inputVal === item ? 'select-item' : ''">{{item}}</text>
                    </view>
                </scroll-view>
            </view>
        </view>

3、绑定组件,设置属性和数据等

<uni-combox :candidates="types" placeholder="违规停车" v-model="type" class="my-combox"></uni-combox>

遇到的问题和解决过程

原先传到后台数据的是反馈类型的文字，后来负责后台处理反馈的队友表示传反馈类型的数字会比较方便，就在上传前进行了对下拉框中选定数据的修改。
但是后面收到传入为空的提示，发现漏考虑了没有点击下拉框时的情形。于是又设置了这种情况下默认上传的反馈类型数据。

总结

uni-app中有很多可以直接使用的组件，非常方便，但在具体的使用上会出现一些偏差，此时应考虑修改源代码或构造其他组件。

参考文档

uni-app官网扩展组件说明
uniapp：uni-combox下拉选中之后下拉框只有被选中项 问题解决