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页面的状态保持和销毁
有网友可能会说,使用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
名称 | 说明 |
---|---|
空 | 自动判断:弹出式:在弹出窗口中打开,展开式:依次在右侧使用新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布局
,以及如何开发布局的构件:
相关链接
pc=mobile+pad自适应布局:页面结构与打开方式的更多相关文章
- 在MyEclipse中改动jsp页面的默认打开方式
在JavaWeb项目中.当然有非常多jsp页面,可是我发现,双击打开jsp页面总是卡机.相对于打开其它java文件而言非常慢,感觉非常不舒服.MyEclipse中默认打开jsp页面是以可视化的形式展现 ...
- Android启动页面的正确打开方式 (转载)
最近由于领导要求写一个手机APP,于是自学开始,不经意间想到使用过的手机APP在打开的时候都是会有一个启动页面,这是如何实现的呢?比较好奇,于是在网上搜到了以下这篇文章,经过个人实验的确可行,不过原文 ...
- ASP.NET MVC 4中如何为不同的浏览器自适应布局和视图
在ASP.NET MVC 4中,可以很简单地实现针对不同的浏览器自适应布局和视图.这个得归功于MVC中的"约定甚于配置"的设计理念. 默认的自适应 MVC 4自动地为移动设备浏览器 ...
- 这可能是史上最全的CSS自适应布局总结教程
标题严格遵守了新广告法,你再不爽,我也没犯法呀!话不多说,直入正题. 所谓布局,其实包含两个含义:尺寸与定位.也就是说,所有与尺寸和定位相关的属性,都可以用来布局. 大体上,布局中会用到的有:尺寸相关 ...
- react抽离配置文件、配置@符号、调整src文件夹---配置scss、编写项目的页面结构、创建各个页面 src/views、开始路由、入口文件处修改代码、修改App.js布局文件、添加底部的导航布局、构建个人中心。。。声明式跳转路由、使用React UI库请求渲染首页数据、
1.回顾 2.react项目的配置 react默认创建的项目配置文件在 node_modules/react-scripts 文件夹内部 2.1 抽离配置文件 cnpm run eject cnpm ...
- 用absolute进行页面的自适应布局
用position:absolute和top,left,bottom,right进行设置可以进行页面的头部,底部,左边框,内容的自适应布局,可以代替position:fixed; <!DOCTY ...
- PC端自适应布局
截止目前,国内绝大多数内容为主的网站(知乎,果壳,V2EX,网易新闻等)均使用内容区定宽布局,大多数电商网站(网易考拉,京东,聚美优品)也使用了内容区定宽的布局,也有些网站使用了自适应布局: 天猫 内 ...
- 关于使用rem单位,calc()进行自适应布局
关于css中的单位 大家都知道在css中的单位,一般都包括有px,%,em等单位,另外css3新增加一个单位rem. 其中px,%等单位平时在传统布局当中使用的比较频繁,大家也比较熟悉,不过px单位在 ...
- PC端、移动端页面适配方案
前言 页面自适应PC端.移动端大体上可以分为两种: 1.在同一个页面进行自适应布局,通常使用CSS3 @media 媒体查询器实现 2.两套页面,在后端进行统一适配,根据不同的浏览器UA返回对应的页面 ...
- html5页面结构
我是html5初学者,最近闲来无事,和各位一起学些下html5. 开发环境 jdk1.6,tomcat6,开发工具eclipse. 新建一个web工程,创建一个index.jsp页面.页面代码如下. ...
随机推荐
- 【Azure 应用服务】如何禁止chinacloudsites.cn 访问?
问题描述 Azure App Service创建后,默认会有一个 Azure App Service创建后,默认会有一个 https://xxxxxxxxxxxxx.chinacloudsites. ...
- 【Azure 应用服务】应用服务中发布Docker Container,如何添加卷(如Azure File Share)以便永久存储文件
问题描述 应用服务中发布Docker Container,如何添加卷(如Azure File Share)以便永久存储文件 问题解答 App Service可以通过门户配置Mount Storage, ...
- 10、mysql的锁
锁概述 锁是计算机协调多个进程或线程并发访问某一资源的机制(避免争抢). 在数据库中,除传统的计算资源(如 CPU.RAM.I/O 等)的争用以外,数据也是一种供许多用户共享的资源.如何保证数据并发访 ...
- 手机端User-agent
转载: http://www.fynas.com/ua 设备 系统 浏览器 User-Agent vivo X20Plus A Android 手机百度 Mozilla/5.0 (Linux; And ...
- react build 后,打包后自动将index.html copy 404.html - create-react-app 创建的项目
起因:build上传gitee,启用路由需要404.html自动跳转 当前环境 create-react-app 搭建的架子 解决方案 由于默认的时候把build.js打包,无法查看,只好eject ...
- day32-JQuery05
jQuery05 9.作业 9.1homework01 对多选框进行操作,输出选中的多选框的个数,并且把选中爱好的名称显示. <!DOCTYPE html> <html lang=& ...
- c++的IO类
CPP的IO类 继承图: IO对象不能拷贝或赋值 istream in = cin; //错! istream &in = cin; //正确! IO对象的状态 strm::good:读正常 ...
- verilog勘误系列之-->算术运算符运算失败
描述 在verilog代码设计时使用算术运算符与乘法搭配使用出现计算错误 原因 由于数据位宽设置不当导致 错误案例 wire signed [13:0] w01; wire signed [23:0] ...
- 关于linux系统版本的一个分类展现
PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明 本文发布于 2014-07-06 22:58:35 ...
- 一天涨 23k Star 的开源项目「GitHub 热点速览」
在 GitHub 上做过开源项目的小伙伴,可能都经历过截图自己项目 100 Star.1000 Star 的时刻,但有些时候事情发生的太快来不及截图,因为可能一觉醒来就破万了.这件事看似有些天方夜谭 ...