详解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 相关文章推荐
PJ Blog修改-禁止复制的代码和方法
Oct 25 Javascript
JS IE和FF兼容性问题汇总
Feb 09 Javascript
批量实现面向对象的实例代码
Jul 01 Javascript
利用div+jquery自定义滚动条样式的2种方法
Jul 18 Javascript
js实现class样式的修改、添加及删除的方法
Jan 20 Javascript
原生js和jQuery写的网页选项卡特效对比
Apr 27 Javascript
使用AngularJS来实现HTML页面嵌套的方法
Jun 17 Javascript
基于 Node.js 实现前后端分离
Apr 23 Javascript
js获取json中key所对应的value值的简单方法
Jun 17 Javascript
Extjs表单输入框异步校验的插件实现方法
Mar 20 Javascript
如何在vue中使用ts的示例代码
Feb 28 Javascript
jQuery实现简单评论功能
Aug 19 jQuery
如何用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
天使彦史上最神还原,性别曝光的那一刻,百万网友恋爱了
2020/03/02 国漫
php基础学习之变量的使用
2011/06/09 PHP
php提示undefined index的几种解决方法
2012/05/21 PHP
如何在smarty中增加类似foreach的功能自动加载数据
2013/06/26 PHP
jQuery中的RadioButton,input,CheckBox取值赋值实现代码
2014/02/18 PHP
yii2中dropDownList实现二级和三级联动写法
2017/04/26 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
用js实现的抽象CSS圆角效果!!
2007/05/03 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
2013/01/23 Javascript
使用ajax+jqtransform实现动态加载select
2014/12/01 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
2015/09/15 Javascript
基于JS2Image实现圣诞树代码
2015/12/24 Javascript
Node.js编写组件的三种实现方式
2016/02/25 Javascript
jQuery为动态生成的select元素添加事件的方法
2016/08/29 Javascript
Webpack path与publicPath的区别详解
2018/05/03 Javascript
nodejs更新package.json中的dependencies依赖到最新版本的方法
2018/10/10 NodeJs
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
2019/11/06 Javascript
JavaScript动态生成表格的示例
2020/11/02 Javascript
python通过BF算法实现关键词匹配的方法
2015/03/13 Python
Python常见字典内建函数用法示例
2018/05/14 Python
Python中dict和set的用法讲解
2019/03/28 Python
Python 线性回归分析以及评价指标详解
2020/04/02 Python
python的reverse函数翻转结果为None的问题
2020/05/11 Python
python GUI模拟实现计算器
2020/06/22 Python
python缩进长度是否统一
2020/08/02 Python
css3 伪元素和伪类选择器详解
2014/09/04 HTML / CSS
使用HTML5技术开发一个属于自己的超酷颜色选择器
2013/09/22 HTML / CSS
html5版canvas自由拼图实例
2014/10/15 HTML / CSS
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上
2013/07/06 面试题
学生抄袭作业的检讨书
2014/10/02 职场文书
高中历史教学反思
2016/02/19 职场文书
2016年百日安全生产活动总结
2016/04/06 职场文书
Python一行代码实现自动发邮件功能
2021/05/30 Python
python单元测试之pytest的使用
2021/06/07 Python
pytorch中的torch.nn.Conv2d()函数图文详解
2022/02/28 Python
Android Flutter实现3D动画效果示例详解
2022/04/07 Java/Android