小程序自定义单页面、全局导航栏的实现代码


Posted in Javascript onMarch 15, 2019

需求

产品说小程序返回到首页不太方便,想添加返回首页按钮,UI说导航栏能不能设置背景图片,因为那样设计挺好看的。

小程序自定义单页面、全局导航栏的实现代码

需求分析并制定方案

这产品和UI都提需求了,咱也不能反驳哈,所以开始调研,分析可行性方案;1、可以添加悬浮按钮。2、自定义导航栏。
添加悬浮按钮,是看起来是比较简单哈,但是感觉不太优雅,会占据页面的空间,体验也不太好。所以想了下第二种方案,自定义导航栏既可以实现产品的需求还可以满足UI的设计美感,在顶部空白处加上返回首页的按钮,这样和返回按钮还对称(最终如图所示,顶部导航栏是个背景图片,分两块组合起来)。

实现方案

一、实现的前提

1、首先查看文档,看文档里关于自定义导航栏是怎么规定的,有哪些限制;还有小程序自定义导航栏全局配置和单页面配置的微信版本和调试库的最低支持版本。

2、在app.json window 增加 navigationStyle:custom ,顶部导航栏就会消失,只保留右上角胶囊状的按钮,如何修改胶囊的颜色呢;胶囊体目前只支持黑色和白色两种颜色 在app.josn window 加上 "navigationBarTextStyle":"white/black"

3、还要考虑加返回按钮和返回首页的按钮,适配不同的机型

先说下两种配置方法:

①全局配置navigationStyle:

调试基础库>=1.9.0

微信客户端>=6.6.0

app.json

{
 "usingComponents": {
  "navigationBar": "/components/navigationBar/navigationBar"
 },
 "window": {
  "navigationStyle": "custom"
 } 
}

②单页面配置navigationStyle

调试基础库>=2.4.3

微信客户端版本>=7.0.0

自定义的页面.json

{
 "window": {
  "navigationStyle": "default"
 } 
}
{
 "navigationStyle": "custom",
 "usingComponents": {
  "navigationBar": "/components/navigationBar/navigationBar"
 }
}
两者的区别就是,全局配置放在app.json文件里,单页面配置放在自定义页面配置文件里。

二、实现的步骤

以下说下几个要点:

1、自定义导航栏文本,是否显示返回,是否显示返回首页,导航栏高度

2、statusBarHeight,用来获取手机状态栏的高度,这个需要在全局app.js中的onLaunch,调用wx.getSystemInfo获取,navigationBarHeight+默认的高度,这个是设定整个导航栏的高度,

3、还有注意的,在写样式距离和大小时建议都用px,因小程序右边的胶囊也是用的px,不是rpx。

4、因为自定义导航栏每个页面都要写,所以把导航栏封装了公共组件,这样只需要在每个页面引入即可。

如下是封装的导航栏组件:

wxml

<view class="navbar" style="{{'height: ' + navigationBarHeight}}">
 <view style="{{'height: ' + statusBarHeight}}"></view>
 <view class='title-container'>
  <view class='capsule' wx:if="{{ back || home }}">
   <view bindtap='back' wx:if="{{back}}">
    <image src='/images/back.png'></image>     
   </view>
   <view bindtap='backHome' wx:if="{{home}}">
    <image src='/images/home.png'></image>
   </view>
  </view>
  <view class='title'>{{text}}</view>
 </view>
</view>
<view style="{{'height: ' + navigationBarHeight}};background: white;"></view>
这里有个需注意的问题,就是一般会出现自定义导航栏,下拉页面,导航栏也随着会下拉,这种问题是因为设置fixed后页面元素整体上移了navigationBarHeight,所以在此组件里设置一个空白view元素占用最上面的navigationBarHeight这块高度

wxss

.navbar {
 width: 100%;
 background-color: #1797eb;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 999;
}
.title-container {
 height: 40px;
 display: flex;
 align-items: center;
 position: relative;
}
.capsule {
 margin-left: 10px;
 height: 30px;
 background: rgba(255, 255, 255, 0.6);
 border: 1px solid #fff;
 border-radius: 16px;
 display: flex;
 align-items: center;
}
.capsule > view {
 width: 45px;
 height: 60%;
 position: relative;
.capsule > view:nth-child(2) {
 border-left: 1px solid #fff; 
}
.capsule image {
 width: 50%;
 height: 100%;
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%,-50%);
}
.title {
 color: white;
 position: absolute;
 top: 6px;
 left: 104px;
 right: 104px;
 height: 30px;
 line-height: 30px;
 font-size: 14px;
 text-align: center;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

js

const app = getApp()

Component({

 properties: {
  text: {
   type: String,
   value: 'Wechat'
  },
  back: {
   type: Boolean,
   value: false
  },
  home: {
   type: Boolean,
   value: false
  }
 },
 data: {
  statusBarHeight: app.globalData.statusBarHeight + 'px',
  navigationBarHeight: (app.globalData.statusBarHeight + 44) + 'px'
 },

 methods: {
  backHome: function () {
   let pages = getCurrentPages()
   wx.navigateBack({
    delta: pages.length
   })
  },
  back: function () {
   wx.navigateBack({
    delta: 1
   })
  }
 }
})

json

{
 "component": true,
 "usingComponents": {}
}
最终还需要考虑下版本兼容的问题,毕竟还有一些用户,微信版本并没有更新到最新版本。

首先可以在app.js里面获取下当前用户的微信版本,做下版本比较,如果小于这个版本,设置个全局变量,也可以在组件写个方法,在不同的页面打开显示不同的顶部导航栏,或者可以控制是否显示导航栏,这里就不详细说了。

亲自试了下,在低于7.0版本的微信中,如果采用单页面自定义导航栏,会出现两个导航栏,这时候通过判断版本号不要再渲染自定义的导航栏组件了,在页面的配置文件里写上title名,还有相应的背景色,这样就会显示自带的导航栏了。

总结

小程序开发是有些坑的地方,从不支持自定义导航栏,到支持全局自定义导航栏,再到现在的支持单页面配置,可以看出在慢慢完善。还有底部tabbar,可自己选择配置的太少了,虽然也支持自定义,但是发现自定义写的底部导航组件体验并不好,每次打开页面都会重新渲染底部的按钮,如果全部写成在一个页面里的tab切换,虽然按钮每次不用重新加载了,但是业务多肯定不行,写到一个单页面里东西也太多了。 希望微信能够多添加或放开一些功能,让开发者更好的服务于产品,给用户更好的体验。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 广告后加载,加载完页面再加载广告
Nov 25 Javascript
jquery中使用循环下拉菜单示例代码
Sep 24 Javascript
兼容主流浏览器的JS复制内容到剪贴板
Dec 12 Javascript
Javascript进制转换实例分析
May 14 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
Aug 31 Javascript
javascript实现别踩白块儿小游戏程序
Nov 22 Javascript
深入理解JS函数的参数(arguments)的使用
May 28 Javascript
微信小程序 网络请求(GET请求)详解
Nov 16 Javascript
jquery二级目录选中当前页的css样式
Dec 08 Javascript
原生JS实现多个小球碰撞反弹效果示例
Jan 31 Javascript
CryptoJS中AES实现前后端通用加解密技术
Dec 18 Javascript
小程序click-scroll组件设计
Jun 18 Javascript
使用webpack搭建vue项目实现脚手架功能
Mar 15 #Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
Mar 15 #Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
Mar 15 #Javascript
浅谈KOA2 Restful方式路由初探
Mar 14 #Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
Mar 14 #Javascript
详解React项目中碰到的IE问题
Mar 14 #Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
Mar 14 #Javascript
You might like
苏联队长,苏联超人蝙蝠侠,这些登场的“山寨”英雄真的很严肃
2020/04/09 欧美动漫
php通过array_unshift函数添加多个变量到数组前端的方法
2015/03/18 PHP
WordPress中给媒体文件添加分类和标签的PHP功能实现
2015/12/31 PHP
PHP中set_include_path()函数相关用法分析
2016/07/18 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
2019/03/30 PHP
拖动Html元素集合 Drag and Drop any item
2006/12/22 Javascript
理解JavaScript变量作用域更轻松
2009/10/25 Javascript
JS字符串处理实例代码
2013/08/05 Javascript
javascript右下角弹层及自动隐藏(自己编写)
2013/11/20 Javascript
轻松创建nodejs服务器(4):路由
2014/12/18 NodeJs
js+html5实现canvas绘制简单矩形的方法
2015/06/05 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
2016/06/13 Javascript
微信小程序Redux绑定实例详解
2017/06/07 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
2018/11/07 Javascript
从0到1构建vueSSR项目之路由的构建
2019/03/07 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
2019/04/09 Javascript
在vue中使用Base64转码的案例
2020/08/07 Javascript
JavaScript函数柯里化实现原理及过程
2020/12/02 Javascript
[50:29]2014 DOTA2华西杯精英邀请赛 5 24 DK VS iG
2014/05/26 DOTA
Python HTMLParser模块解析html获取url实例
2015/04/08 Python
Python实现的字典值比较功能示例
2018/01/08 Python
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
python并发编程多进程 互斥锁原理解析
2019/08/20 Python
Python 使用type来定义类的实现
2019/11/19 Python
在Python中使用turtle绘制多个同心圆示例
2019/11/23 Python
Mac中PyCharm配置Anaconda环境的方法
2020/03/04 Python
python 如何快速复制序列
2020/09/07 Python
澳大利亚女性快速时尚零售商:Ally Fashion
2018/04/25 全球购物
护士毕业自我鉴定
2014/02/07 职场文书
公务员检讨书
2014/11/01 职场文书
《改造我们的学习》心得体会
2014/11/07 职场文书
工程安全生产协议书
2014/11/21 职场文书
2014年小学图书室工作总结
2014/12/09 职场文书
应届毕业生自荐信
2015/03/04 职场文书
《成长的天空》读后感3篇
2019/12/06 职场文书
微信小程序APP页面的之间的相互传递参数以及自定义组件
2022/04/19 Javascript