小程序组件—自定义顶部导航

微信小程序凭借着“不占内存,即用即走”等特点,加上微信的社交的属性,其用户量一路保持快速的增长。对其的应用要求也日渐增高,使用更多样化、个性化。其中,对顶部导航的自定义实现,因交互功能成了一个普遍需要实现的组件,而尤因其不同设备下样式的兼容问题 如何更优雅的实现 使其成为大家讨论的热点。
下面我们从对其的设计、实现、使用上进行详细阐述,让大家更加了解这个组件。原创文章,若有写的不妥之处,欢迎大家指出更正。

自定义导航的设计

界面设计

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


顶部导航设计效果图

功能设计

主要功能如下:

  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分享:https://github.com/linger777/xiaochengxu/blob/master/xcxmodule/src/readmes/NAVBAR.md
gitee分享:https://gitee.com/linger777/xiaochengxu/blob/master/xcxmodule/src/readmes/NAVBAR.md
小程序片段分享:https://developers.weixin.qq.com/s/AzGaZTmV7D8j
有需要的童鞋自取。下面给大家介绍下如何使用:

使用说明

  1. 定义页面自定义顶部导航
config = { navigationStyle: "custom" };
  1. 引入组件
import navbar from '@/components/navbarNew'
  1. 注册组件
components = {navbar, }
  1. 调用组件
<navbar :navbar.sync="navbar"></navbar>
  1. 赋值
    data = {
        navbar: {
            flag: true, //是否使用navbar
            title: '顶部导航', // 自定义导航标题
            height: '', // 导航高度
            titleStyle: 'screen' //1:标题在左右胶囊间居中; 2: 标题相对屏幕居中。默认是2
        },
    }
  1. 如页面遇到有 sticky \ fixed 定位的view,按需要可以通过加入style进行调整
style="top: {{navbar.flag ? navbar.height : 0}}rpx;"

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,843评论 6 502
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,538评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,187评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,264评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,289评论 6 390
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,231评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,116评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,945评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,367评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,581评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,754评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,458评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,068评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,692评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,842评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,797评论 2 369
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,654评论 2 354

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,751评论 1 92
  • 需求 产品说小程序返回到首页不太方便,想添加返回首页按钮,UI说导航栏能不能设置背景图片,因为那样设计挺好看的。 ...
    一个敲代码的前端妹子阅读 3,160评论 1 4
  • 相信很多小伙伴在开发微信小程序的时候都会有自定义顶部导航栏的需求,不够要说明的是小程序右上角的胶囊是不能自定义的哦...
    土家肸哥阅读 2,814评论 1 7
  • 因新工作主要负责微信小程序这一块,最近的重心就移到这一块,该博客是对微信小程序整体的整理归纳以及标明一些细节点,初...
    majun00阅读 7,341评论 0 9
  • 雨打残秋夜渐长, 风敲玉户转微凉。 三更惆怅箋千字, 一时相思泪两行。
    八斗才001阅读 152评论 1 2