V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
zhennann
V2EX  ›  Node.js

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

  •  
  •   zhennann · 2022-07-22 13:01:20 +08:00 · 3378 次点击
    这是一个创建于 696 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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,这些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元数据指定页面尺寸

    <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 布局,以及如何开发布局的构件:

    相关链接

    zhennann
        1
    zhennann  
    OP
       2022-07-25 11:04:41 +08:00
    新录制了一个 B 站免费视频,要想知道 pc=mobile+pad 自适应布局背后的页面结构设计,看这一个视频就够了: https://www.bilibili.com/video/BV1d34y1J7kS/?vd_source=8a2b870d6d5dc83f8f4b973c95613fd8
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3115 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 11:44 · PVG 19:44 · LAX 04:44 · JFK 07:44
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.