详解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 相关文章推荐
ext 代码生成器
Aug 07 Javascript
基于jQuery实现图片的前进与后退功能
Apr 24 Javascript
js图片向右一张张滚动效果实例代码
Nov 23 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
Dec 08 Javascript
快速学习AngularJs HTTP响应拦截器
Dec 31 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
Apr 08 Javascript
js如何获取网页所有图片
May 12 Javascript
微信小程序实现皮肤功能(夜间模式)
Jun 18 Javascript
解决React Native端口号修改的方法
Jul 28 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
Nov 28 Javascript
手动下载Chrome并解决puppeteer无法使用问题
Nov 12 Javascript
js中位运算的运用实例分析
Dec 11 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
用php的ob_start来生成静态页面的方法分析
2011/03/09 PHP
一个PHP二维数组排序的函数分享
2014/01/17 PHP
Laravel 5 框架入门(三)
2015/04/09 PHP
Yii rules常用规则示例
2016/03/15 PHP
php遍历解析xml字符串的方法
2016/05/05 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
Javascript学习笔记8 用JSON做原型
2010/01/11 Javascript
一个收集图片的bookmarlet(js 刷新页面中的图片)
2010/05/27 Javascript
javascript 判断中文字符长度的函数代码
2012/08/27 Javascript
JavaScript建立一个语法高亮输入框实现思路
2013/02/26 Javascript
JS隐藏参数post传值实例
2013/04/18 Javascript
Firefox中使用outerHTML的2种解决方法
2014/06/07 Javascript
JavaScript设计模式之外观模式介绍
2014/12/28 Javascript
javascript去除字符串左右两端的空格
2015/02/05 Javascript
java中String类型变量的赋值问题介绍
2016/03/23 Javascript
Angular2实现自定义双向绑定属性
2017/03/22 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
2017/06/13 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
2017/08/23 Javascript
AngularJS实现controller控制器间共享数据的方法示例
2017/10/30 Javascript
vue filters的使用详解
2018/06/11 Javascript
详解如何构建一个Angular6的第三方npm包
2018/09/07 Javascript
利用Vue构造器创建Form组件的通用解决方法
2018/12/03 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
2020/07/17 Javascript
python使用tornado实现登录和登出
2018/07/28 Python
Python实现删除排序数组中重复项的两种方法示例
2019/01/31 Python
使用Pyinstaller转换.py文件为.exe可执行程序过程详解
2019/08/06 Python
django 数据库 get_or_create函数返回值是tuple的问题
2020/05/15 Python
实现Python3数组旋转的3种算法实例
2020/09/16 Python
《分一分》教学反思
2014/04/13 职场文书
总经理岗位职责说明书
2014/07/30 职场文书
公司经营目标责任书
2015/01/29 职场文书
Python基础之函数嵌套知识总结
2021/05/23 Python
Golang表示枚举类型的详细讲解
2021/09/04 Golang
Java实现添加条码或二维码到Word文档
2022/06/01 Java/Android