小程序组件之自定义顶部导航实例


Posted in Javascript onJune 12, 2019

前言

微信小程序凭借着“不占内存,即用即走”等特点,加上微信的社交的属性,其用户量一路保持快速的增长。对其的应用要求也日渐增高,使用更多样化、个性化。其中,对顶部导航的自定义实现,因交互功能成了一个普遍需要实现的组件,而尤因其不同设备下样式的兼容问题 如何更优雅的实现 使其成为大家讨论的热点。

下面我们从对其的设计、实现、使用上进行详细阐述,让大家更加了解这个组件。原创文章,若有写的不妥之处,欢迎大家指出更正。

自定义导航的设计

界面设计

目前,大多小程序对自定义导航的设计是:标题居中;左侧胶囊包裹返回上一页按钮和到首页按钮,要和右侧系统默认胶囊样式布局一致。效果如下:

小程序组件之自定义顶部导航实例

功能设计

主要功能如下:

  1. 自定义 小程序 顶部导航 :微信版本号 <7 的无此功能
  2. 去首页 功能 :首页没有此功能
  3. 返回 功能:无上一页没有此功能
  4. 模拟系统默认样式:和系统默认右边胶囊样式保持一致
  5. 居中显示标题:字数过多时 省略号代替

详细实现

布局样式实现

这个组件的实现的主要的重点在于不同设备上的样式兼容。由于右侧胶囊在不同设备下的表现是不一样的,所以左侧胶囊的布局样式要随不同设备进行自适应,既左侧胶囊的高度间距等样式数据要先计算出来再赋予其值。故难点就在于如何获得这些值。经过一番针对个别手机的兼容踩坑操作(此处省略一万字...?),最终得到正解(此处感谢小伙伴的雪中送炭?),那就是可以一劳永逸的wx.getMenuButtonBoundingClientRect()

wx.getMenuButtonBoundingClientRect()
获取菜单按钮(右上角胶囊按钮)的布局位置信息。坐标信息以屏幕左上角为原点。
菜单按钮的布局位置信息:
width  宽度(px)
height  高度(px)
top  上边界坐标(px)
right  右边界坐标(px)
bottom  下边界坐标(px)
left  左边界坐标(px)

有了这个关键点,下面带着大家看具体如何一步步优雅地完美地实现这个组件。

首先获取布局信息对象:

let menuRect = wx.getMenuButtonBoundingClientRect()

1、实现左侧胶囊

获取左侧胶囊的高度:

this.height_capsule = menuRect.height

赋值给view :

<view class="nav_capsule" style="height:{{height_capsule}}px">

然后,对胶囊内部采用flex对其进行布局及一些细节处理,胶囊的单独实现就完成了。

2、实现左侧胶囊与右侧胶囊对齐

在其外包一层父级view,即导航条。对导航条进行与右侧一样的上边距和下边距填充。

<view class="navbar" style="padding-top: {{paddingTop}}px; padding-bottom: {{paddingBottom}}px;">

获取边距值:

this.paddingTop = menuRect.top
this.paddingBottom = menuRect.top - wepy.getSystemInfoSync().statusBarHeight

这样,此时对齐效果就实现了。

3、自定义标题垂直水平居中

我们对导航条内部进行flex布局,由于右侧胶囊是系统默认的,要使标题块居中,就需要做一个右侧胶囊占位,同时给导航左右设置那边距。

导航左右设置内边距:

padding-left:20rpx;
padding-right:20rpx;

右侧胶囊占位:

<view class="nav_right" style="height: {{height_capsule}}px; width: {{width_capsule}}px;"></view>
this.width_capsule = menuRect.width

此时,标题块就处于居中的位置了。然后对齐进行垂直水平居中和省略号控制就好了。

4、完善导航条布局样式

上面,一个自定义导航条的样式布局就基本完成。但要达到可以很优雅地被使用还是需要一些完善的。

-设置定位:使其被任意页面调用都处于视窗最顶部固定不变的位置。

position: fixed;top: 0;

设置层级:使其被任意页面调用都处于页面中最高层级视窗的最前面。

z-index: 99999;

增加占位块:使其使其被任意页面调用都不会遮挡其他页面元素。

<view class="placeholder" wx:if="{{navbar.flag}}" style="height:{{height}}px"></view>
this.height = menuRect.bottom + this.paddingBottom;
.placeholder{width: 100%;}

然后,用一个view包裹navbar和placeholder,就是一个完善的自定义导航条了。

功能实现

1、显示自定义小程序顶部导航

自定义导航,需要在单个页面中设置参数:

config = { navigationStyle: "custom" };

,由于在对局部页面进行自定义时,

客户端 7.0.0 以下版本,navigationStyle 只在 app.json 中生效。

所以,我们要对版本进行兼容判断,是否显示自定义导航。

this.navbar.flag = wx.getSystemInfoSync().version.split('.')[0] >= 7 ? true : false
<view class="navbar-box" wx:if="{{navbar.flag}}">

2、显示返回上一页按钮

如果没有上一页,就不需要返回上一页功能:

this.showBack = getCurrentPages().length > 1 ? true : false
<button class="nav_back" @tap="navBack" wx:if="{{showBack}}">

如果此按钮不显示,只剩下去首页按钮,分割线也要隐藏掉:

<view class="divide" wx:if="{{showBack}}"></view>

到此,一个自定义导航组件就完整地实现了。还在为兼容或者调用时需要适配很多的问题而一筹莫展的童鞋,看到这儿是不是可以展颜了呀。完整代码呈现如下:

github分享:github.com/linger777/x…

gitee分享:gitee.com/linger777/x…

小程序片段分享:developers.weixin.qq.com/s/AzGaZTmV7…

有需要的童鞋自取。下面给大家介绍下如何使用:

使用说明

定义页面自定义顶部导航

config = { navigationStyle: "custom" };

引入组件

import navbar from '@/components/navbarNew'

注册组件

components = {navbar, }

调用组件

<navbar :navbar.sync="navbar"></navbar>

赋值

data = {
  navbar: {
   flag: true, //是否使用navbar
   title: '顶部导航', // 自定义导航标题
   height: '' // 导航高度
  },
 }

如页面遇到有 sticky \ fixed 定位的view,按需要可以通过加入style进行调整

style="top: {{navbar.flag ? navbar.height : 0}}rpx;"

以上就是对自定义顶部导航的全部分享,如有不解,欢迎留言讨论。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
在JavaScript中遭遇级联表达式陷阱
Mar 08 Javascript
Jquery替换已存在于element上的event的方法
Mar 09 Javascript
javascript中比较字符串是否相等的方法
Jul 23 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
Jun 20 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
Aug 27 Javascript
js 左右悬浮对联广告代码示例
Dec 12 Javascript
AngularJS Bootstrap详细介绍及实例代码
Jul 28 Javascript
webpack中的热刷新与热加载的区别
Apr 09 Javascript
15分钟深入了解JS继承分类、原理与用法
Jan 19 Javascript
js仿京东放大镜效果
Aug 09 Javascript
js实现购物车商品数量加减
Sep 21 Javascript
5种 JavaScript 方式实现数组扁平化
Oct 05 Javascript
vue项目中将element-ui table表格写成组件的实现代码
Jun 12 #Javascript
React 全自动数据表格组件——BodeGrid的实现思路
Jun 12 #Javascript
详解如何提升JSON.stringify()的性能
Jun 12 #Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
Jun 12 #Javascript
浅谈webpack 四个核心概念之Entry
Jun 12 #Javascript
vue安装遇到的5个报错及解决方法
Jun 12 #Javascript
深入学习JavaScript 高阶函数
Jun 11 #Javascript
You might like
php下使用iconv需要注意的问题
2010/11/20 PHP
php生成验证码函数
2015/10/20 PHP
变量在 PHP7 内部的实现(二)
2015/12/21 PHP
php实现无限级分类查询(递归、非递归)
2016/03/10 PHP
mailto的使用技巧分享
2012/12/21 Javascript
Jquery实现的一种常用高亮效果示例代码
2014/01/28 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
2015/08/24 Javascript
jQuery购物网页经典制作案例
2016/08/19 Javascript
jquery广告无缝轮播实例
2017/01/05 Javascript
Bootstrap如何激活导航状态
2017/03/22 Javascript
JavaScript简介_动力节点Java学院整理
2017/06/26 Javascript
JavaScript设计模式之构造函数模式实例教程
2018/07/02 Javascript
Layui 设置select下拉框自动选中某项的方法
2018/08/14 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
2019/04/17 Javascript
JS实现星星海特效
2019/12/24 Javascript
微信小程序修改checkbox的样式代码实例
2020/01/21 Javascript
[11:57]《一刀刀一天》第十七期:TI中国军团加油!
2014/05/26 DOTA
Python3写入文件常用方法实例分析
2015/05/22 Python
Python生成数字图片代码分享
2017/10/31 Python
python编程培训 python培训靠谱吗
2018/01/17 Python
Python3生成手写体数字方法
2018/01/30 Python
TensorFlow高效读取数据的方法示例
2018/02/06 Python
Flask框架配置与调试操作示例
2018/07/23 Python
python中实现控制小数点位数的方法
2019/01/24 Python
python函数调用,循环,列表复制实例
2020/05/03 Python
Python实现迪杰斯特拉算法过程解析
2020/09/18 Python
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
Seavenger官网:潜水服、浮潜、靴子和袜子
2020/03/05 全球购物
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
2015年四年级班主任工作总结
2015/10/22 职场文书
中学音乐课教学反思
2016/02/18 职场文书
因个人工作失误检讨书
2019/06/21 职场文书
vue+elementui 实现新增和修改共用一个弹框的完整代码
2021/06/08 Vue.js
mysql 体系结构和存储引擎介绍
2022/05/06 MySQL
zabbix配置nginx监控的实现
2022/05/25 Servers
Nginx如何获取自定义请求header头和URL参数详解
2022/07/23 Servers