|
|
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展开
_self
在当前view中打开
_view
在新view中打开
_group
在新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
指定哪个边栏，可选项：left/right/bottom
name
边栏面板的名称
title
边栏面板的标题，支持国际化
context：通过 context 既可以向新页面传入参数，也可以从新页面返回结果数据
参见：页面传参与返回值
开发进阶
前面我们对pc=mobile+pad 自适应布局的理念和实现机制进行了阐述。接下来，就可以进一步了解如何配置mobile 布局和pc 布局，以及如何开发布局的构件：
介绍
Mobile 布局配置
PC 布局配置
选项卡按钮
边栏按钮
边栏面板
相关链接
文档: https://cabloy.com/
演示：https://test.cabloy.com/
GitHub: https://github.com/zhennann/cabloy
新录制了一个 B 站免费视频，要想知道 pc=mobile+pad 自适应布局背后的页面结构设计，看这一个视频就够了： https://www.bilibili.com/video/BV1d34y1J7kS/?vd_source=8a2b870d6d5dc83f8f4b973c95613fd8
|
|
发表于 2023-12-3 13:46:38