B站免费视频:CabloyJS全栈框架:从入门到精通:017 页面结构与页面打开方式

基础构件:view/page

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

1. Framework7的策略

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

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

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布局弹出页面堆叠显示

页面尺寸

页面尺寸有三种类型:smallmediumlarge,默认是small

- 指定页面尺寸

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

  1. 1<template>
  2. 2</template>
  3. 3<script>
  4. 4export default {
  5. 5 meta: {
  6. 6 size: 'small',
  7. 7 },
  8. 8 data() {
  9. 9 return {};
  10. 10 },
  11. 11 methods: {
  12. 12 },
  13. 13};
  14. 14</script>
  15. 15<style scoped>
  16. 16</style>

页面标题

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

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

  1. 1<template>
  2. 2</template>
  3. 3<script>
  4. 4export default {
  5. 5 meta: {
  6. 6 title: 'Sign in',
  7. 7 },
  8. 8 data() {
  9. 9 return {};
  10. 10 },
  11. 11 methods: {
  12. 12 },
  13. 13};
  14. 14</script>
  15. 15<style scoped>
  16. 16</style>

页面打开方式

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

  1. 1this.$view.navigate('/test/party/kitchen-sink/about', { target: '_self' });
  • target
名称 说明
自动判断:弹出式:在弹出窗口中打开,展开式:依次在右侧使用新view展开
_self 在当前view中打开
_view 在新view中打开
_group 在新group中打开
_popup 在弹出窗口中打开

侧边栏页面显示

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

  1. 1 onPerformSettings() {
  2. 2 this.$view.navigate(`/a/dashboard/dashboard/settings?dashboardUserId=${this.dashboardUserId}`, {
  3. 3 scene: 'sidebar',
  4. 4 sceneOptions: { side: 'right', name: 'profile', title: 'Profile2' },
  5. 5 context: {
  6. 6 params: {
  7. 7 dashboard: this,
  8. 8 },
  9. 9 },
  10. 10 });
  11. 11 },
名称 说明
scene 指定为sidebar
sceneOptions 边栏选项
context 传入新页面的环境参数
  • sceneOptions
名称 说明
side 指定哪个边栏,可选项:left/right/bottom
name 边栏面板的名称
title 边栏面板的标题,支持国际化
  • context:通过context既可以向新页面传入参数,也可以从新页面返回结果数据