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

081800438-谢靖怡 学生 2022-06-26 21:52:03
这个作业属于哪个课程软件工程实践2022年春-F班
这个作业要求在哪里软件工程实践总结&个人技术博客
这个作业的目标技术博客
其他参考文献《构建之法》

目录

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

技术概述

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

技术详述

1、将combox组合框导入HbuildX

img

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>

img

遇到的问题和解决过程

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

img

img

总结

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

参考文档

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

...全文
1755 回复 打赏 收藏 举报
写回复
回复
切换为时间正序
请发表友善的回复…
发表回复
相关推荐
发帖
软件工程实践2022年春-F班

103

社区成员

福州大学-计算机与大数据学院-傅明建
软件工程 高校
社区管理员
  • Mingjian_Fu
  • Lyu-
  • Wake_lie
加入社区
帖子事件
创建了帖子
2022-06-26 21:52
社区公告

本次作业截止时间为2022-02-18 23:59:59,请未完成的同学抓紧时间,加入社区后的同学要按照“学号-姓名”的格式修改社区昵称。