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


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 相关文章推荐
js获取url参数的使用扩展实例
Dec 29 Javascript
[原创]来自ImageSee官方 JavaScript图片浏览器
Jan 16 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
Feb 07 Javascript
jQuery列表拖动排列具体实现
Nov 04 Javascript
JavaScript笔记之数据属性和存储器属性
Mar 31 Javascript
JS验证图片格式和大小并预览的简单实例
Oct 11 Javascript
Vue.js tab实现选项卡切换
May 16 Javascript
vue中的ref和$refs的使用
Nov 22 Javascript
node.js实现为PDF添加水印的示例代码
Dec 05 Javascript
JavaScript闭包与作用域链实例分析
Jan 21 Javascript
vue 实现v-for循环回来的数据动态绑定id
Nov 07 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
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信息函数
2015/10/21 PHP
JavaScript 常用函数库详解
2009/10/21 Javascript
轻量级 JS ToolTip提示效果
2010/07/20 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
2014/04/15 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
2015/02/26 Javascript
javascript最基本的函数汇总
2015/06/25 Javascript
jQuery实现平滑滚动的标签分栏切换效果
2015/08/28 Javascript
JS实现可点击展开与关闭的左侧广告代码
2015/09/02 Javascript
js显示动态时间的方法详解
2016/08/20 Javascript
JS冒泡事件与事件捕获实例详解
2016/11/25 Javascript
JS设置随机出现2个数字的实例代码
2017/07/19 Javascript
Angular4学习笔记router的简单使用
2018/03/30 Javascript
详解如何用babel转换es6的class语法
2018/04/03 Javascript
Vue.js 中的 v-show 指令及用法详解
2018/11/19 Javascript
Node.js + express基本用法教程
2019/03/14 Javascript
javascript实现异形滚动轮播
2019/11/28 Javascript
vue从零实现一个消息通知组件的方法详解
2020/03/16 Javascript
JavaScript 几种循环方式以及模块化的总结
2020/09/03 Javascript
[53:13]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-GAMING
2014/05/22 DOTA
[01:12:27]EG vs Secret 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
Python使用scrapy采集时伪装成HTTP/1.1的方法
2015/04/08 Python
Python中元组,列表,字典的区别
2017/05/21 Python
Python Django 命名空间模式的实现
2019/08/09 Python
查看已安装tensorflow版本的方法示例
2020/04/19 Python
Python3 pyecharts生成Html文件柱状图及折线图代码实例
2020/09/29 Python
Pytorch1.5.1版本安装的方法步骤
2020/12/31 Python
matplotlib grid()设置网格线外观的实现
2021/02/22 Python
大学生村官任职感言
2014/01/09 职场文书
旷课检讨书1000字
2014/02/14 职场文书
2014年文学毕业生自我鉴定
2014/04/23 职场文书
优秀教育工作者事迹材料
2014/12/24 职场文书
幼儿教师辞职信范文
2015/03/02 职场文书
幼儿园新学期开学寄语
2015/05/27 职场文书
退休劳动合同怎么写?
2019/10/25 职场文书
MySQL 覆盖索引的优点
2021/05/19 MySQL
解析redis hash应用场景和常用命令
2021/08/04 Redis