智能家居应用

功能特性

手势控制

• 左滑手势: 当侧边菜单显示时，左滑可以隐藏侧边菜单
• 右滑手势: 当侧边菜单隐藏时，右滑可以打开侧边菜单
• 触觉反馈: 手势操作成功时会提供轻微的触觉反馈
• 防误触: 设置了垂直距离限制，避免误触
• 页面限制: 在通知页面时，只有高亮索引为0时才启用手势功能，避免与页面内部滑动冲突

手势参数

• 最小滑动距离: 50px
• 最大垂直距离: 100px（防止误触）
• 最大滑动时间: 500ms
• 防抖时间: 300ms
• 支持在页面任何位置进行手势操作（除通知页面外）

技术实现

触摸事件处理

• 使用 @touchstart、@touchmove、@touchend 事件
• 计算滑动距离和方向
• 智能判断手势有效性
• 页面特定逻辑：在通知页面（currentTabIndex === 2）时禁用手势

CSS优化

• 设置 touch-action: pan-x pan-y 确保触摸事件正常工作
• 防止页面滚动干扰手势识别

使用方法

1. 打开侧边菜单:

   • 点击顶部栏的菜单按钮
   • 或者从屏幕右边缘向左滑动（除通知页面外）

2. 关闭侧边菜单:

   • 点击菜单外的遮罩区域
   • 或者从屏幕左边缘向右滑动（除通知页面外）

3. 通知页面特殊处理:

   • 在通知页面时，只有当高亮索引为0（"全部"标签）时，左右滑动手势才会触发侧边菜单
   • 当高亮索引为其他值（安全、故障、布防模式、系统相关）时，手势功能会被禁用
   • 这样可以避免与通知页面内部的滑动功能冲突，同时保持必要的交互功能

开发说明

手势识别逻辑位于 pages/index/index.vue 文件中：

• handleTouchStart(): 记录触摸开始位置，在通知页面时根据高亮索引决定是否启用手势
• handleTouchMove(): 处理触摸移动，在通知页面时根据高亮索引决定是否启用手势
• handleTouchEnd(): 判断手势类型并执行相应操作，在通知页面时根据高亮索引决定是否启用手势

聪明房子 APK 项目

这是一个基于 uni-app 开发的智能家居应用，支持多语言功能。

多语言功能

支持的语言

• 中文 (zh)
• 英文 (en)
• 日语 (ja)

使用方法

1. 切换语言：

   • 点击左上角菜单按钮打开侧边菜单
   • 点击"语言设置"选项
   • 选择想要的语言（中文/English/日本語）
   • 语言会立即切换，无需重启应用

2. 语言设置：

   • 语言选择会保存在本地存储中
   • 下次打开应用会自动使用上次选择的语言
   • 默认语言为中文

技术实现

• 使用 uni-app 的本地存储功能保存语言设置
• 通过事件总线 (uni.$emit 和 uni.$on) 实现组件间的语言变化通知
• 所有文本都通过 $i18n.t('key') 方法获取翻译

文件结构

common/
├── i18n/
│   └── index.js          # 多语言配置文件
└── components/
    ├── CustomHeader.vue   # 自定义头部组件
    ├── BottomTab.vue      # 底部导航组件
    ├── SideMenu.vue       # 侧边菜单组件
    └── DeviceTab.vue      # 设备列表组件

添加新的翻译

1. 在 common/i18n/index.js 中的 messages 对象中添加新的翻译键值对
2. 在组件中使用 this.$i18n.t('key') 获取翻译文本
3. 确保所有支持的语言都有对应的翻译

示例

// 在组件中使用
this.$i18n.t('work')  // 获取"工作"的翻译
this.$i18n.t('device')  // 获取"设备"的翻译

开发环境

• uni-app
• Vue.js
• SCSS

运行项目

1. 安装依赖
2. 在 HBuilderX 中打开项目
3. 运行到手机或模拟器

功能特性

• 多语言支持（中文、英文、日语）
• 设备管理
• 房间管理
• 通知系统
• 智能控制
• 响应式设计