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页面的状态保持和销毁
有网友可能会说，使用
vue router
+
keep-alive
也可以实现这种机制。不是不可以，而是非常繁琐，不直观
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
| 名称 | 说明 |
|---|---|
| 空 |
自动判断：弹出式：在弹出窗口中打开，展开式：依次在右侧使用新展开 |
| _self |
在当前中打开 |
| _view |
在新中打开 |
| _group |
在新中打开 |
| _popup | 在弹出窗口中打开 |
侧边栏页面显示
还可以通过方法
$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,
},
},
});
},
| 名称 | 说明 |
|---|---|
| scene | 指定为sidebar |
| sceneOptions | 边栏参数 |
| context | 传入新页面的环境参数 |
- sceneOptions
| 名称 | 说明 |
|---|---|
| side |
指定哪个边栏，可选项： |
| name | 边栏面板的名称 |
| title | 边栏面板的标题，支持国际化 |
-
context：通过context既可以向新页面传入参数，也可以从新页面返回结果数据
-
参见：
页面传参与返回值
-
参见：
开发进阶
前面我们对
pc=mobile+pad自适应布局
的理念和实现机制进行了阐述。接下来，就可以进一步了解如何配置
mobile布局
和
pc布局
，以及如何开发布局的构件：
相关链接