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


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实现一个页面多个css样式实现
May 29 Javascript
浅谈Javascript的静态属性和原型属性
May 07 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
Aug 25 Javascript
javascript生成随机数方法汇总
Nov 12 Javascript
BootStrap的Datepicker控件使用心得分享
May 25 Javascript
使用JS实现图片展示瀑布流效果的实例代码
Sep 12 Javascript
微信小程序 设置启动页面的两种方法
Mar 09 Javascript
一个简易时钟效果js实现代码
Mar 25 Javascript
最后说说Vue2 SSR 的 Cookies 问题
May 25 Javascript
微信小程序发送短信验证码完整实例
Jan 07 Javascript
JavaScript实现简单贪吃蛇效果
Mar 09 Javascript
vue如何搭建多页面多系统应用
Jun 17 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中的常用函数回顾
2013/07/11 PHP
thinkphp学习笔记之多表查询
2014/07/28 PHP
php中explode函数用法分析
2014/11/15 PHP
修复ShopNC使用QQ 互联时提示100010 错误
2015/11/08 PHP
Python中使用django form表单验证的方法
2017/01/16 PHP
ko knockoutjs动态属性绑定技巧应用
2012/11/14 Javascript
JavaScript将页面表格导出为Excel的具体实现
2013/12/27 Javascript
Javascript检查图片大小不要让大图片撑破页面
2014/11/04 Javascript
jquery代码实现简单的随机图片瀑布流效果
2015/04/20 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
2015/11/15 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
分享bootstrap学习笔记心得(组件及其属性)
2017/01/11 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
2017/01/21 Javascript
Nodejs搭建wss服务器教程
2017/05/24 NodeJs
Angular 2 利用Router事件和Title实现动态页面标题的方法
2017/08/23 Javascript
详解Vue中使用Echarts的两种方式
2018/07/03 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
2018/11/26 Javascript
JS实现头条新闻的经典轮播图效果示例
2019/01/30 Javascript
Python实现Linux下守护进程的编写方法
2014/08/22 Python
python对url格式解析的方法
2015/05/13 Python
基于Python Shell获取hostname和fqdn释疑
2016/01/25 Python
python opencv实现任意角度的透视变换实例代码
2018/01/12 Python
tensorflow 恢复指定层与不同层指定不同学习率的方法
2018/07/26 Python
在python 中实现运行多条shell命令
2019/01/07 Python
python ChainMap 合并字典的实现步骤
2019/06/11 Python
python cv2读取rtsp实时码流按时生成连续视频文件方式
2019/12/25 Python
python yield和Generator函数用法详解
2020/02/10 Python
Tensorflow中的降维函数tf.reduce_*使用总结
2020/04/20 Python
Python+Selenium随机生成手机验证码并检查页面上是否弹出重复手机号码提示框
2020/09/21 Python
HTML5 Canvas——用路径描画线条实例介绍
2013/06/09 HTML / CSS
Footshop乌克兰:运动鞋的最大选择
2019/12/01 全球购物
小学教研工作制度
2014/01/15 职场文书
2014基建处领导班子“四风”对照检查材料思想汇报
2014/10/04 职场文书
Python中Cookies导出某站用户数据的方法
2021/05/17 Python
Java输出Hello World完美过程解析
2021/06/13 Java/Android
一篇文章带你掌握SQLite3基本用法
2022/06/14 数据库