企业官网建设流程全解析

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-project

2.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 class="container"> <uv-checkbox-group @change="handleGroupChange"> <view v-for="(item, index) in visibleList" :key="item.id" class="list-item" > <uv-checkbox :value="item.id" :checked="item.checked" :disabled="shouldDisable(item)" > {{ item.name }} </uv-checkbox> </view> </uv-checkbox-group> </view> </template>

3.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" :key="item.id" class="list-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 :data="visibleList" :height="500" :item-size="50" > <template v-slot="{ item }"> <uv-checkbox :value="item.id" :checked="item.checked" :disabled="shouldDisable(item)" > {{ item.name }} </uv-checkbox> </template> </uv-list>

5.3 跨平台兼容性处理

不同平台下checkbox的样式差异处理：

/* #ifdef MP-WEIXIN */ .uv-checkbox { transform: scale(0.8); } /* #endif */ /* #ifdef H5 */ .uv-checkbox { margin-right: 10px; } /* #endif */

6. 实际开发中的经验分享

6.1 常见问题排查

1. 复选框不显示选中状态：

   • 检查value值是否唯一
   • 确认checked属性是否正确绑定
   • 确保change事件正确更新数据

2. 列表项隐藏异常：

   • 检查visibleList计算逻辑
   • 确认shouldHide方法返回值正确
   • 查看CSS过渡效果是否冲突

3. 多选限制失效：

   • 验证maxSelect的值
   • 检查shouldDisable方法逻辑
   • 确认handleGroupChange中的限制条件

6.2 性能优化技巧

1. 对于超长列表，建议：

   • 使用分页加载
   • 实现虚拟滚动
   • 避免在模板中使用复杂表达式

2. 状态更新优化：

   // 不好的做法 - 每次都会创建新数组 this.listData = [...this.listData] // 更好的做法 - 只更新需要改变的项目 this.listData.splice(index, 1, newItem)

3. 样式优化建议：

   • 避免在列表项中使用box-shadow
   • 减少不必要的z-index使用
   • 使用transform代替top/left动画

6.3 扩展功能思路

1. 添加搜索过滤：

   filteredList() { return this.visibleList.filter(item => item.name.includes(this.searchText) ) }

2. 实现拖拽排序：

   <uv-draggable v-model="visibleList" @end="onDragEnd" > <!-- 列表项内容 --> </uv-draggable>

3. 添加多选操作栏：

   <view class="action-bar" v-if="selectedCount > 0"> <text>已选{{ selectedCount }}项</text> <button @click="batchDelete">批量删除</button> </view>

7. 完整示例代码

以下是整合后的完整组件代码：

<template> <view class="container"> <!-- 搜索框（可选） --> <uv-input v-model="searchText" placeholder="搜索选项..." @input="handleSearch" /> <!-- 操作栏（可选） --> <view class="action-bar" v-if="selectedCount > 0"> <text>已选择 {{ selectedCount }} 项</text> <uv-button size="mini" @click="resetSelection">清空</uv-button> </view> <!-- 主列表 --> <uv-checkbox-group @change="handleGroupChange"> <view v-for="(item, index) in filteredList" :key="item.id" class="list-item" :class="{ 'selected': item.checked, 'hidden': shouldHide(item) }" > <uv-checkbox :value="item.id" :checked="item.checked" :disabled="shouldDisable(item)" > <text class="item-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>

在实际项目开发中，我通常会额外添加以下功能：

1. 本地缓存选中的状态，避免页面刷新后丢失选择
2. 添加空状态提示，当没有数据或搜索结果时显示友好提示
3. 实现多语言支持，特别是面向国际化的应用
4. 添加无障碍访问属性，提升可访问性

这个方案在微信小程序和H5端都经过了充分测试，表现稳定。需要注意的是，在支付宝小程序中，checkbox的样式可能需要额外调整才能达到理想的视觉效果。