1. 需求场景与技术选型分析在uni-app开发中我们经常遇到需要处理多选列表的场景。这次的需求比较特殊需要实现一个复选框组列表用户可以任意选择其中的两项系统自动隐藏未选中的条目仅展示被选中的两条数据。这种交互模式在对比型功能中非常实用比如商品参数对比、学生成绩对比等场景。为什么选择uv-checkbox组件uv-ui是基于uni-app的组件库其checkbox组件性能优化良好原生checkbox在部分平台存在样式兼容性问题uv-checkbox-group提供了便捷的多选管理能力支持自定义样式和布局符合uni-app多端统一的要求2. 基础环境搭建与数据准备2.1 初始化uni-app项目首先确保已安装HBuilderX和必要的环境依赖npm install -g vue/cli vue create -p dcloudio/uni-preset-vue my-project2.2 引入uv-ui组件库在项目根目录执行npm install uv-ui --save然后在main.js中全局引入import uvUI from uv-ui import uv-ui/theme.css Vue.use(uvUI)2.3 准备测试数据在页面data中初始化测试数据data() { return { listData: [ { id: 1, name: 选项一, checked: false }, { id: 2, name: 选项二, checked: false }, // ...更多测试数据 ], maxSelect: 2 // 最大选择数量 } }3. 核心功能实现3.1 模板结构设计template view classcontainer uv-checkbox-group changehandleGroupChange view v-for(item, index) in visibleList :keyitem.id classlist-item uv-checkbox :valueitem.id :checkeditem.checked :disabledshouldDisable(item) {{ item.name }} /uv-checkbox /view /uv-checkbox-group /view /template3.2 计算属性处理显示逻辑computed: { visibleList() { const selected this.listData.filter(item item.checked) // 当选中数量达到最大值时只显示选中的项 return selected.length this.maxSelect ? selected : this.listData } }3.3 复选框组change事件处理methods: { handleGroupChange(e) { const values e.detail.value this.listData this.listData.map(item ({ ...item, checked: values.includes(item.id) })) }, shouldDisable(item) { const selectedCount this.listData.filter(i i.checked).length return selectedCount this.maxSelect !item.checked } }4. 样式优化与交互增强4.1 基础样式设计.container { padding: 20rpx; } .list-item { padding: 20rpx 0; border-bottom: 1rpx solid #eee; display: flex; align-items: center; } /* 选中项高亮效果 */ .list-item.selected { background-color: #f5f5f5; }4.2 添加动画过渡效果.list-item { transition: all 0.3s ease; } /* 隐藏未选中项时的动画 */ .list-item:not(.selected) { opacity: 1; max-height: 100px; transition: opacity 0.3s, max-height 0.3s; } .list-item.hidden { opacity: 0; max-height: 0; padding: 0; margin: 0; border: none; }4.3 动态类名绑定修改模板部分view v-for(item, index) in visibleList :keyitem.id classlist-item :class{ selected: item.checked, hidden: shouldHide(item) } 添加方法shouldHide(item) { const selected this.listData.filter(i i.checked) return selected.length this.maxSelect !item.checked }5. 边界情况处理与性能优化5.1 选择数量限制逻辑handleGroupChange(e) { const values e.detail.value // 限制最大选择数量 if (values.length this.maxSelect) { uni.showToast({ title: 最多只能选择${this.maxSelect}项, icon: none }) return } this.listData this.listData.map(item ({ ...item, checked: values.includes(item.id) })) }5.2 大数据量性能优化对于长列表建议使用虚拟滚动uv-list :datavisibleList :height500 :item-size50 template v-slot{ item } uv-checkbox :valueitem.id :checkeditem.checked :disabledshouldDisable(item) {{ item.name }} /uv-checkbox /template /uv-list5.3 跨平台兼容性处理不同平台下checkbox的样式差异处理/* #ifdef MP-WEIXIN */ .uv-checkbox { transform: scale(0.8); } /* #endif */ /* #ifdef H5 */ .uv-checkbox { margin-right: 10px; } /* #endif */6. 实际开发中的经验分享6.1 常见问题排查复选框不显示选中状态检查value值是否唯一确认checked属性是否正确绑定确保change事件正确更新数据列表项隐藏异常检查visibleList计算逻辑确认shouldHide方法返回值正确查看CSS过渡效果是否冲突多选限制失效验证maxSelect的值检查shouldDisable方法逻辑确认handleGroupChange中的限制条件6.2 性能优化技巧对于超长列表建议使用分页加载实现虚拟滚动避免在模板中使用复杂表达式状态更新优化// 不好的做法 - 每次都会创建新数组 this.listData [...this.listData] // 更好的做法 - 只更新需要改变的项目 this.listData.splice(index, 1, newItem)样式优化建议避免在列表项中使用box-shadow减少不必要的z-index使用使用transform代替top/left动画6.3 扩展功能思路添加搜索过滤filteredList() { return this.visibleList.filter(item item.name.includes(this.searchText) ) }实现拖拽排序uv-draggable v-modelvisibleList endonDragEnd !-- 列表项内容 -- /uv-draggable添加多选操作栏view classaction-bar v-ifselectedCount 0 text已选{{ selectedCount }}项/text button clickbatchDelete批量删除/button /view7. 完整示例代码以下是整合后的完整组件代码template view classcontainer !-- 搜索框可选 -- uv-input v-modelsearchText placeholder搜索选项... inputhandleSearch / !-- 操作栏可选 -- view classaction-bar v-ifselectedCount 0 text已选择 {{ selectedCount }} 项/text uv-button sizemini clickresetSelection清空/uv-button /view !-- 主列表 -- uv-checkbox-group changehandleGroupChange view v-for(item, index) in filteredList :keyitem.id classlist-item :class{ selected: item.checked, hidden: shouldHide(item) } uv-checkbox :valueitem.id :checkeditem.checked :disabledshouldDisable(item) text classitem-text{{ item.name }}/text !-- 其他自定义内容 -- /uv-checkbox /view /uv-checkbox-group /view /template script export default { data() { return { listData: [ // 初始化数据... ], searchText: , maxSelect: 2 } }, computed: { selectedCount() { return this.listData.filter(item item.checked).length }, visibleList() { const selected this.listData.filter(item item.checked) return selected.length this.maxSelect ? selected : this.listData }, filteredList() { if (!this.searchText) return this.visibleList return this.visibleList.filter(item item.name.includes(this.searchText) ) } }, methods: { handleGroupChange(e) { const values e.detail.value if (values.length this.maxSelect) { uni.showToast({ title: 最多只能选择${this.maxSelect}项, icon: none }) return } this.listData this.listData.map(item ({ ...item, checked: values.includes(item.id) })) }, shouldDisable(item) { return this.selectedCount this.maxSelect !item.checked }, shouldHide(item) { return this.selectedCount this.maxSelect !item.checked }, resetSelection() { this.listData this.listData.map(item ({ ...item, checked: false })) }, handleSearch() { // 搜索逻辑可以更复杂 console.log(搜索:, this.searchText) } } } /script style scoped /* 样式代码同上 */ /style在实际项目开发中我通常会额外添加以下功能本地缓存选中的状态避免页面刷新后丢失选择添加空状态提示当没有数据或搜索结果时显示友好提示实现多语言支持特别是面向国际化的应用添加无障碍访问属性提升可访问性这个方案在微信小程序和H5端都经过了充分测试表现稳定。需要注意的是在支付宝小程序中checkbox的样式可能需要额外调整才能达到理想的视觉效果。 
长河君 · 2026/10/27 17:41:43 · 阅读 1.2k uni-app中使用uv-checkbox实现智能多选列表
1. 需求场景与技术选型分析在uni-app开发中我们经常遇到需要处理多选列表的场景。这次的需求比较特殊需要实现一个复选框组列表用户可以任意选择其中的两项系统自动隐藏未选中的条目仅展示被选中的两条数据。这种交互模式在对比型功能中非常实用比如商品参数对比、学生成绩对比等场景。为什么选择uv-checkbox组件uv-ui是基于uni-app的组件库其checkbox组件性能优化良好原生checkbox在部分平台存在样式兼容性问题uv-checkbox-group提供了便捷的多选管理能力支持自定义样式和布局符合uni-app多端统一的要求2. 基础环境搭建与数据准备2.1 初始化uni-app项目首先确保已安装HBuilderX和必要的环境依赖npm install -g vue/cli vue create -p dcloudio/uni-preset-vue my-project2.2 引入uv-ui组件库在项目根目录执行npm install uv-ui --save然后在main.js中全局引入import uvUI from uv-ui import uv-ui/theme.css Vue.use(uvUI)2.3 准备测试数据在页面data中初始化测试数据data() { return { listData: [ { id: 1, name: 选项一, checked: false }, { id: 2, name: 选项二, checked: false }, // ...更多测试数据 ], maxSelect: 2 // 最大选择数量 } }3. 核心功能实现3.1 模板结构设计template view classcontainer uv-checkbox-group changehandleGroupChange view v-for(item, index) in visibleList :keyitem.id classlist-item uv-checkbox :valueitem.id :checkeditem.checked :disabledshouldDisable(item) {{ item.name }} /uv-checkbox /view /uv-checkbox-group /view /template3.2 计算属性处理显示逻辑computed: { visibleList() { const selected this.listData.filter(item item.checked) // 当选中数量达到最大值时只显示选中的项 return selected.length this.maxSelect ? selected : this.listData } }3.3 复选框组change事件处理methods: { handleGroupChange(e) { const values e.detail.value this.listData this.listData.map(item ({ ...item, checked: values.includes(item.id) })) }, shouldDisable(item) { const selectedCount this.listData.filter(i i.checked).length return selectedCount this.maxSelect !item.checked } }4. 样式优化与交互增强4.1 基础样式设计.container { padding: 20rpx; } .list-item { padding: 20rpx 0; border-bottom: 1rpx solid #eee; display: flex; align-items: center; } /* 选中项高亮效果 */ .list-item.selected { background-color: #f5f5f5; }4.2 添加动画过渡效果.list-item { transition: all 0.3s ease; } /* 隐藏未选中项时的动画 */ .list-item:not(.selected) { opacity: 1; max-height: 100px; transition: opacity 0.3s, max-height 0.3s; } .list-item.hidden { opacity: 0; max-height: 0; padding: 0; margin: 0; border: none; }4.3 动态类名绑定修改模板部分view v-for(item, index) in visibleList :keyitem.id classlist-item :class{ selected: item.checked, hidden: shouldHide(item) } 添加方法shouldHide(item) { const selected this.listData.filter(i i.checked) return selected.length this.maxSelect !item.checked }5. 边界情况处理与性能优化5.1 选择数量限制逻辑handleGroupChange(e) { const values e.detail.value // 限制最大选择数量 if (values.length this.maxSelect) { uni.showToast({ title: 最多只能选择${this.maxSelect}项, icon: none }) return } this.listData this.listData.map(item ({ ...item, checked: values.includes(item.id) })) }5.2 大数据量性能优化对于长列表建议使用虚拟滚动uv-list :datavisibleList :height500 :item-size50 template v-slot{ item } uv-checkbox :valueitem.id :checkeditem.checked :disabledshouldDisable(item) {{ item.name }} /uv-checkbox /template /uv-list5.3 跨平台兼容性处理不同平台下checkbox的样式差异处理/* #ifdef MP-WEIXIN */ .uv-checkbox { transform: scale(0.8); } /* #endif */ /* #ifdef H5 */ .uv-checkbox { margin-right: 10px; } /* #endif */6. 实际开发中的经验分享6.1 常见问题排查复选框不显示选中状态检查value值是否唯一确认checked属性是否正确绑定确保change事件正确更新数据列表项隐藏异常检查visibleList计算逻辑确认shouldHide方法返回值正确查看CSS过渡效果是否冲突多选限制失效验证maxSelect的值检查shouldDisable方法逻辑确认handleGroupChange中的限制条件6.2 性能优化技巧对于超长列表建议使用分页加载实现虚拟滚动避免在模板中使用复杂表达式状态更新优化// 不好的做法 - 每次都会创建新数组 this.listData [...this.listData] // 更好的做法 - 只更新需要改变的项目 this.listData.splice(index, 1, newItem)样式优化建议避免在列表项中使用box-shadow减少不必要的z-index使用使用transform代替top/left动画6.3 扩展功能思路添加搜索过滤filteredList() { return this.visibleList.filter(item item.name.includes(this.searchText) ) }实现拖拽排序uv-draggable v-modelvisibleList endonDragEnd !-- 列表项内容 -- /uv-draggable添加多选操作栏view classaction-bar v-ifselectedCount 0 text已选{{ selectedCount }}项/text button clickbatchDelete批量删除/button /view7. 完整示例代码以下是整合后的完整组件代码template view classcontainer !-- 搜索框可选 -- uv-input v-modelsearchText placeholder搜索选项... inputhandleSearch / !-- 操作栏可选 -- view classaction-bar v-ifselectedCount 0 text已选择 {{ selectedCount }} 项/text uv-button sizemini clickresetSelection清空/uv-button /view !-- 主列表 -- uv-checkbox-group changehandleGroupChange view v-for(item, index) in filteredList :keyitem.id classlist-item :class{ selected: item.checked, hidden: shouldHide(item) } uv-checkbox :valueitem.id :checkeditem.checked :disabledshouldDisable(item) text classitem-text{{ item.name }}/text !-- 其他自定义内容 -- /uv-checkbox /view /uv-checkbox-group /view /template script export default { data() { return { listData: [ // 初始化数据... ], searchText: , maxSelect: 2 } }, computed: { selectedCount() { return this.listData.filter(item item.checked).length }, visibleList() { const selected this.listData.filter(item item.checked) return selected.length this.maxSelect ? selected : this.listData }, filteredList() { if (!this.searchText) return this.visibleList return this.visibleList.filter(item item.name.includes(this.searchText) ) } }, methods: { handleGroupChange(e) { const values e.detail.value if (values.length this.maxSelect) { uni.showToast({ title: 最多只能选择${this.maxSelect}项, icon: none }) return } this.listData this.listData.map(item ({ ...item, checked: values.includes(item.id) })) }, shouldDisable(item) { return this.selectedCount this.maxSelect !item.checked }, shouldHide(item) { return this.selectedCount this.maxSelect !item.checked }, resetSelection() { this.listData this.listData.map(item ({ ...item, checked: false })) }, handleSearch() { // 搜索逻辑可以更复杂 console.log(搜索:, this.searchText) } } } /script style scoped /* 样式代码同上 */ /style在实际项目开发中我通常会额外添加以下功能本地缓存选中的状态避免页面刷新后丢失选择添加空状态提示当没有数据或搜索结果时显示友好提示实现多语言支持特别是面向国际化的应用添加无障碍访问属性提升可访问性这个方案在微信小程序和H5端都经过了充分测试表现稳定。需要注意的是在支付宝小程序中checkbox的样式可能需要额外调整才能达到理想的视觉效果。