博客
关于我
mui开发app教程-2
阅读量:776 次
发布时间:2019-03-24

本文共 2389 字,大约阅读时间需要 7 分钟。

功能1:选项卡事件绑定

上一章提到了如何为当前app添加选项卡,但此时的选项卡仅支持点击颜色变化未其他功能。而在实际使用过程中,点击选项卡的选项会跳转到对应页面。需要注意,这里的跳转是同页面内部实现,在使用PhoneGap官方示例中类似于Vue Router的页面跳转方式。

选项卡绑定页面链接

要实现页面跳转首先需要确保目标页面已创建。具体操作如下:

创建页面创建页面需要遵循以下步骤:

  • 使用PhoneGap API创建新的子页面
  • 设置子页面的显示位置
  • 将子页面添加至主页面
  • 选项卡绑定链接选项卡绑定链接的实现相对简单,只需为选项卡的a标签设置href属性即可实现。

    示例代码如下:

    进一步实现页面间跳转的代码如下:

    // 获取当前webViewvar self = plus.webview.currentWebview();// 定义当前活跃选项卡var activeTab = "html/home.html"; // 检查当前页面是否存在var current = plus.webview.getWebviewById(activeTab);if (current == null) {  // 创建新页面  current = plus.webview.create(activeTab, activeTab, top: "0");  // 将新页面添加至主页面  self.append(current);} else {  // 显示当前页面  current.show();}// 处理选项卡点击事件mui('.mui-bar-tab').on('tap', 'a', function(e) {  var targetTab = this.getAttribute('href');  if (targetTab === activeTab) {    return; // 选项卡相同,无需处理  }  // 检查平台类型或是否为首次显示  if (mui.os.ios || aniShow[targetTab]) {    if (plus.webview.getWebviewById(targetTab) == null) {      // 创建新页面      var newCurrent = plus.webview.create(targetTab, targetTab, top: "0");      self.append(newCurrent);    } else {      // 显示目标页面并添加动画效果      plus.webview.show(targetTab, { fade: true, duration: 300 });    }  } else {    // 添加动画效果    var temp = {};    temp[targetTab] = true;    mui.extend(aniShow, temp);    if (plus.webview.getWebviewById(targetTab) == null) {      var newCurrent = plus.webview.create(targetTab, targetTab, top: "0");      self.append(newCurrent);    } else {      plus.webview.show(targetTab, { fade: true, duration: 300 });    }  }  // 隐藏当前页面  plus.webview.hide(activeTab);  // 更新当前活跃选项卡  activeTab = targetTab;})

    选项卡点击测试在每个子页面中添加测试文字,点击选项卡后可以看到对应页面内容实现跳转效果。

    功能2:状态栏布局

    app的状态栏布局分为两种模式:

    沉浸式布局

    状态栏融入内容,与其他UI元素无缝连接。

    示例界面:

    沉浸式布局示例

    非沉浸式布局

    内容呈现在状态栏下方,将状态栏与其他UI元素清晰区分开。

    示例界面:

    非沉浸式布局示例

    界面布局开启沉浸式

    步骤说明:

  • 更新app的config.xml配置文件
  • 在标题区域设置固定高度和背景颜色
  • 配置全局沉浸式设置
  • 具体实现:

    true

    服务器效果配置完成后,可以看到子页面内容会完全覆盖状态栏顶部。

    功能3:页面模板设计

    前两步功能的基本配置完成后,下一步是统筹页面的美观规范。整体风格模仿QQ或企业微信:

  • 顶部标题区域
  • 中间内容区域
  • 选项卡区域
  • 顶部title设计

    默认mui导航栏高度44px,设置自定义样式:

    .mui-fix-bar {  height: 60px !important;  background-color: #007AFF !important;  padding-top: 20px;  box-shadow: 0 0 0 !important;}.mui-fix-bar .mui-title {  color: white !important;}

    中间内容区域分配根据页面布局:

  • 顶部固定条
  • 中间固定区域
  • 底部选项卡
  • 中间区域代码示例:

    测试内容

    .mui-body { padding-top: 5px; position: fixed; top: 60px;}

    总体布局各个区域的定位和尺寸需精确设置,确保,

  • 顶部标题不影响中间内容
  • 选项卡区域不会遮挡中间内容
  • 各个子页面适配显示
  • 你可能感兴趣的文章
    mac mysql 进程_Mac平台下启动MySQL到完全终止MySQL----终端八步走
    查看>>
    Mac OS 12.0.1 如何安装柯美287打印机驱动,刷卡打印
    查看>>
    MangoDB4.0版本的安装与配置
    查看>>
    Manjaro 24.1 “Xahea” 发布!具有 KDE Plasma 6.1.5、GNOME 46 和最新的内核增强功能
    查看>>
    mapping文件目录生成修改
    查看>>
    MapReduce程序依赖的jar包
    查看>>
    mariadb multi-source replication(mariadb多主复制)
    查看>>
    MariaDB的简单使用
    查看>>
    MaterialForm对tab页进行隐藏
    查看>>
    Member var and Static var.
    查看>>
    memcached高速缓存学习笔记001---memcached介绍和安装以及基本使用
    查看>>
    memcached高速缓存学习笔记003---利用JAVA程序操作memcached crud操作
    查看>>
    Memcached:Node.js 高性能缓存解决方案
    查看>>
    memcache、redis原理对比
    查看>>
    memset初始化高维数组为-1/0
    查看>>
    Metasploit CGI网关接口渗透测试实战
    查看>>
    Metasploit Web服务器渗透测试实战
    查看>>
    MFC模态对话框和非模态对话框
    查看>>
    Moment.js常见用法总结
    查看>>
    MongoDB出现Error parsing command line: unrecognised option ‘--fork‘ 的解决方法
    查看>>