pc=mobile+pad 自适应布局：页面结构与打开方式

pc=mobile+pad 自适应布局

在这篇文章，咱们重点聊聊自适应布局的页面结构，以及打开页面的几种方式。关于pc=mobile+pad 自适应布局的起源、概念、效果，参见文章：自适应布局：pc = mobile + pad

基础构件：view/page

不论是mobile 布局还是pc 布局都由view/page构成。换句话说，view/page是实现 pc=mobile+pad 自适应布局的基石

1. Framework7 的策略

view/page是由 Framework7 组件库引入的概念。一个view就代表了一个视图容器，一个view可以包含多个page，这些page在view容器当中采用堆叠的机制，从而可以轻松实现手机端页面前进与后退的操作

关键问题：实现手机端页面前进与后退，核心要考虑的是历史页面组件如何保持状态，又何时销毁？

Framework7 内置了一个router 路由库，通过 page 的堆叠机制轻松实现 page 页面的状态保持和销毁

• Framework7 Page：文档

• Framework7 View/Router：文档

有网友可能会说，使用vue router+keep-alive也可以实现这种机制。不是不可以，而是非常繁琐，不直观

• 具体分析，请参见：vue 的 keep-alive 非常实用，为什么 angular 和 react 都不跟进呢？

2. CabloyJS 的改造优化

由此可见，Framework7 是为开发原生 mobile 端应用量身定做的 UI 组件库。CabloyJS 为了将 Framework7 在 mobile 端的交互体验和开发模式移入 pc 端，对view/page组件分别进行了改造和优化。比如，在 Framework7 中，view/page对应的 vue 组件分别是f7-view/f7-page，而在 CabloyJS 中对应的 vue 组件分别是eb-view/eb-page

eb 前缀代表 egg-born ，egg-born 是 CabloyJS 框架的第一阶段，提供最基础的架构设计

页面结构

1. mobile 布局

• 主页面：由多个tab 页签构成，每一个页签是一个view容器

• 弹出页面：当在tab 页签中点击链接时，将弹出页面。弹出页面可以是一个或者多个view容器进行堆叠显示

2. pc 布局

• 侧边栏：一个边栏面板就是一个view容器

• 内容区域

  • tab 页签：内容区域由多个tab 页签构成

  • group：一个tab 页签对应一个group。一个group包含多个view容器

    • 展开模式（ tile ）：在展开模式中，多个view容器依次向右平铺展开

    • 弹出模式（ popup ）：在弹出模式中，第一个 view容器铺满页面空间，剩余 view容器参照mobile 布局的弹出页面堆叠显示

页面尺寸

页面尺寸有三种类型：small、medium、large，默认是small

- 指定页面尺寸

可通过页面组件的meta元数据指定页面尺寸

<template> </template> <script> export default { meta: { size: 'small', }, data() { return {}; }, methods: { }, }; </script> <style scoped> </style> 

页面标题

模块a-layoutpc会自动提取页面组件中eb-navbar元素的title属性，然后显示在头部导航栏中

当然也可通过页面组件的meta元数据指定页面标题

<template> </template> <script> export default { meta: { title: 'Sign in', }, data() { return {}; }, methods: { }, }; </script> <style scoped> </style> 

页面打开方式

可以通过方法$view.navigate传递target属性，指定页面打开方式

this.$view.navigate('/test/party/kitchen-sink/about', { target: '_self' }); 

• target

侧边栏页面显示

还可以通过方法$view.navigate在侧边栏面板当中打开页面。比如，在右边栏面板打开 dashboard 的配置页面，代码如下：

 onPerformSettings() { this.$view.navigate(`/a/dashboard/dashboard/settings?dashboardUserId=${this.dashboardUserId}`, { scene: 'sidebar', sceneOptions: { side: 'right', name: 'profile', title: 'Profile2' }, context: { params: { dashboard: this, }, }, }); }, 

• sceneOptions

• context：通过 context 既可以向新页面传入参数，也可以从新页面返回结果数据

  • 参见：页面传参与返回值

开发进阶

前面我们对pc=mobile+pad 自适应布局的理念和实现机制进行了阐述。接下来，就可以进一步了解如何配置mobile 布局和pc 布局，以及如何开发布局的构件：

• 介绍

• Mobile 布局配置

• PC 布局配置

• 选项卡按钮

• 边栏按钮

• 边栏面板

相关链接

• 文档: https://cabloy.com/

• 演示：https://test.cabloy.com/

• GitHub: https://github.com/zhennann/cabloy