详解mpvue中小程序自定义导航组件开发指南


Posted in Javascript onFebruary 11, 2019

这篇笔记主要记录一下基于mpvue的小程序中实现自定义导航的思路及应用。分享出来抛砖引玉,如有谬误或优化空间,欢迎交流。

小程序的配置项navigationStyle设置为custom之后,导航栏只保留右上角胶囊按钮,颜色、标题文字内容均可以自定义,可以此实现导航栏的个性化需求,实际应用如沉浸式视频播放页等。

详解mpvue中小程序自定义导航组件开发指南

小程序7.0.0之后的版本开始支持自定义单个页面的导航栏,将页面的navigationStyle设置为custom即可。mpvue的配置方式如下:

详解mpvue中小程序自定义导航组件开发指南

由于不同操作系统、不同机型的导航栏高度是不同的,所以自定义导航栏核心要解决的问题是不同机型中导航栏高度的兼容问题。

详解mpvue中小程序自定义导航组件开发指南

如上图所示,导航栏一共由两部分组成:状态栏和标题栏。状态栏就是用来展示时间、网络状态的那一栏,全面屏(刘海屏幕)的机型中状态栏会比其他屏幕高很多:ios系统带刘海屏的都是44,其他都为20,包括pad。 而安卓机的数值则更多。我们可以通过微信的apiwx.getSystemInfo获取状态栏的高度(statusBarHeight)。而标题栏高度不能通过小程序api获取到,通过同级多个机型的测试数据,我们基本可以按照ios中44px安卓中48px来算。
这样一来就好办了,通过statusBarHeight获取到状态栏高度后,再判断当前的系统加上对应的标题栏后,就可以获取到正确的导航栏高度了。

template中的html代:(因为小程序中的video组件有着最高的层级,是不会被普通html标签覆盖的,所以导航栏组件中全部采用了<cover-view>标签。):

<template>
  <div class="comp-navbar">
    <!-- 占位栏 -->
    <cover-view class="placeholder-bar" :style="{height: navBarHeight + 'px'}"> </cover-view>
    <!-- 导航栏主体 -->
    <cover-view class="navbar" :style="{height: navBarHeight + 'px',backgroundColor:navBackgroundColor}">
      <!-- 状态栏 -->
      <cover-view class="nav-statusbar" :style="{height: statusBarHeight + 'px'}"></cover-view>
      <!-- 标题栏 -->
      <cover-view class="nav-titlebar" :style="{height: titleBarHeight + 'px' }">
        <!-- home及后退键 -->
        <cover-view class="bar-options">
          <cover-view v-if="backVisible" class="opt opt-back" @click="backClick()">
          <cover-image class="back-image" src="/static/images/back.png"></cover-image>
          </cover-view>
          <cover-view class="line" v-if="backVisible && homePath"></cover-view>
          <cover-view v-if="homePath" class="opt opt-home" @click="homeClick()">
          <cover-image class="home-image" src="/static/images/home.png"></cover-image>
          </cover-view>
        </cover-view>
        <!-- 标题 -->
        <cover-view class="bar-title" :style="[{color:titleColor}]">{{title}}</cover-view>
      </cover-view>
    </cover-view>
  </div>
</template>

js代码:

beforeMount() {
    const self = this;
    wx.getSystemInfo({
      success(system) {
        console.log(`system:`, system);
        self.statusBarHeight = system.statusBarHeight;
        self.platform = system.platform;

        let platformReg = /ios/i;
        if (platformReg.test(system.platform)) {
          self.titleBarHeight = 44;
        } else {
          self.titleBarHeight = 48;
        }

        self.navBarHeight = self.statusBarHeight + self.titleBarHeight;
      }
    });
  },

自定义导航栏的可自定义内容:标题文字、文字颜色、标题栏背景色、回退按钮是否显示、home按钮的地址。示例代码如下:

<navigation-bar :title="videoTitle"
  :navBackgroundColor="'pink'"
  :titleColor="'green'"
  :back-visible="true"
  :home-path="'/pages/index/main'"></navigation-bar>

最后奉上github地址,欢迎检阅代码,欢迎star。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
window.parent调用父框架时 ie跟火狐不兼容问题
Jul 30 Javascript
Javascript 八进制转义字符(8进制)
Apr 08 Javascript
如何通过javascript操作web控件的自定义属性
Nov 25 Javascript
我的Node.js学习之路(一)
Jul 06 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
Jun 01 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
Dec 08 Javascript
JavaScript动态创建div等元素实例讲解
Jan 06 Javascript
jquery实现无刷新验证码的简单实例
May 19 Javascript
JavaScript中Array对象用法实例总结
Nov 29 Javascript
Vue2.0组件间数据传递示例
Mar 07 Javascript
jQuery中复合选择器简单用法示例
Mar 31 jQuery
如何使JavaScript休眠或等待
Apr 27 Javascript
如何用JavaScript实现功能齐全的单链表详解
Feb 11 #Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
Feb 11 #Javascript
vue实现动态显示与隐藏底部导航的方法分析
Feb 11 #Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
Feb 11 #Javascript
react配置antd按需加载的使用
Feb 11 #Javascript
react中使用css的7中方式(最全总结)
Feb 11 #Javascript
mpvue+vant app搭建微信小程序的方法步骤
Feb 11 #Javascript
You might like
Windows和Linux中php代码调试工具Xdebug的安装与配置详解
2014/05/08 PHP
基于OpenCart 开发支付宝,财付通,微信支付参数错误问题
2015/10/01 PHP
PHP+JS三级菜单联动菜单实现方法
2016/02/24 PHP
php中mkdir()函数的权限问题分析
2016/09/24 PHP
基于php伪静态的实现方法解析
2020/07/31 PHP
Docker 安装 PHP并与Nginx的部署实例讲解
2021/02/27 PHP
jquery中选择块并改变属性值的方法
2013/07/31 Javascript
jquery easyui combobox模糊过滤(示例代码)
2013/11/30 Javascript
页面实时更新时间的JS实例代码
2013/12/18 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
2014/04/25 Javascript
Jquery Post处理后不进入回调的原因及解决方法
2014/07/15 Javascript
js简单实现标签云效果实例
2015/08/06 Javascript
正则表达式替换html元素属性的方法
2016/11/26 Javascript
简单实现JavaScript图片切换效果
2016/11/28 Javascript
如何快速上手Vuex
2017/02/14 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
基于daterangepicker日历插件使用参数注意的问题
2017/08/10 Javascript
JavaScript实现各种排序的代码详解
2017/08/28 Javascript
详解从买域名到使用pm2部署node.js项目全过程
2018/03/07 Javascript
详解vue组件中使用路由方法
2019/02/12 Javascript
AutoJs实现刷宝短视频的思路详解
2020/05/22 Javascript
[02:29]DOTA2英雄基础教程 陈
2013/12/17 DOTA
[34:44]Liquid vs TNC Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
[01:37]PWL S2开团时刻DAY1&2——这符有毒
2020/11/20 DOTA
python3 http提交json参数并获取返回值的方法
2018/12/19 Python
python的schedule定时任务模块二次封装方法
2019/02/19 Python
Linux下通过python获取本机ip方法示例
2019/09/06 Python
用python画一只可爱的皮卡丘实例
2019/11/21 Python
python 循环数据赋值实例
2019/12/02 Python
银行实习自我鉴定
2013/10/12 职场文书
九年级化学教学反思
2014/01/28 职场文书
企业文化口号
2014/06/12 职场文书
幼儿园爱国卫生月活动总结
2014/06/30 职场文书
教师考核表个人总结
2015/02/12 职场文书
详解Python自动化之文件自动化处理
2021/06/21 Python
golang中字符串MD5生成方式总结
2021/07/04 Golang