更新记录

1.0.0（2025-05-14） 下载此版本

发布

平台兼容性

宽屏适配-分栏示例

这是一个展示如何在 uni-app-x 中实现宽屏适配的示例项目。通过响应式设计和动态组件，实现在不同屏幕宽度下的显示效果。

实现原理

1. 屏幕宽度检测 在 list.uvue 页面onLoad 生命周期中，通过uni.getSystemInfoSync()获取windowWidth或者uni.getDeviceInfo()获取deviceType，检测是否为宽屏

2. 响应式布局

使用 CSS 媒体查询和条件渲染实现响应式布局

• 在宽屏设备上，列表和详情会并排显示
• 在窄屏设备上，列表和详情会分开展示

3. 动态组件加载 把页面当组件导入，使用动态组件，根据当前选择的详情项动态加载对应的详情页组件

4. 组件参数的传递方式

   • 窄屏模式：通过路由传参方式传递，组件页面使用 onLoad 生命周期获取参数
   • 宽屏模式：通过组件 props 方式传递，组件页面使用 watch 监听属性变化 使用 localArticleId 作为内部状态统一管理两种来源的参数，避免直接修改 props

宽屏模式

在宽屏模式下（屏幕宽度 >= 768px）：

• 列表和详情同时显示
• 列表占据左侧 30% 宽度
• 详情占据右侧 70% 宽度
• 点击列表项时，详情区域动态更新

窄屏模式

在窄屏模式下（屏幕宽度 < 768px）：

• 默认只显示列表，点击列表项时，隐藏列表，显示详情
• 列表和详情不会同时显示

项目结构

pages/
  ├── list/
  │   ├── list.uvue        # 主页面，包含列表和详情容器
  │   ├── detail1.uvue     # 详情组件1
  │   ├── detail2.uvue     # 详情组件2
  │   └── detail3.uvue     # 详情组件3