这个需求要不是UI和我讲有其他小程序实现了,我都还以为小程序还不能做到自定义导航。还好是在设计阶段给出的需求,不然。。。
先看看效果吧
微信小程序自定义导航栏
开始接介绍用法:
1:配置app.json
什么都别管,先查看文档json配置
然后在app.json
设置navigationStyle
为custom
(自定义导航栏)
注意!: 如果这里设置为自定义导航,那么所有页面都会变成自定义导航;想在其他页面的.json文件配置自定义导航是没用的,所以后面需要用到template模板
或者component组件
2:了解下原导航在各个手机型号的高度(适配)
导航栏高度
wx.getSystemInfo 和 wx.getSystemInfoSync 获取机器信息
screenHeight - windowHeight 计算标题栏高度
标题栏高度:
‘iPhone’: 64,
‘iPhone X’: 88,
‘android’: 68
小程序部分真机设备信息采集 (下图是网上转载而来)
3:编写component或者template
这里app.json配置影响的全局配置,所以其他页面都成了自定义导航,只有写一个公共组件或者模板套用了(随你挑选一个),这里我选择component构造器。
Component构造器可用于定义组件,调用Component构造器时可以指定组件的属性、数据、方法等。
JSON
一开始就贴出JSON,是为了提醒某些忘记配置json得人(为啥没效果!什么鬼东西!垃圾组件!cao):
创建component,先在json(component.json)配置好component
使用component,先在json(要使用的wxml.json)配置component的名称和引用路径
{"component": true,"usingComponents": {}}
wxml
<view class='status-bar'><view class='goBack' bindtap='goBack' style="padding-top:{{bar_Height}}px;" hidden='{{show_bol}}'>/*返回按钮*/<image src='/images/back.png'></image></view><view class="tabar {{my_class ? 'tabar2':''}}" style="padding-top:{{bar_Height}}px;"><text class="red">{{title}}</text>/*标题*/</view></view>
hidden='{{show_bol}}'
这里的show_bol
就是用来控制是否显示返回标签(说白了就是是内页还是首页,该不该有返回功能)padding-top:{{bar_Height}}px
bar_Height为获取到的手机状态栏的高度;
wxml(3月更新)
所有页面因导航栏脱离文档流导致上移,统一控制。
解决:
原基础上最外层再加一层< view > 来占据padding的位置,适配所有页面,加上cover_state控制是否需要,如果顶部导航需要透明则设为false
<view style="padding-top:{{cover_state ? bar_Height + 44 : 0}}px;"><view class='status-bar'><view class='goBack' bindtap='goBack' style="padding-top:{{bar_Height}}px;" hidden='{{show_bol}}'>/*返回按钮*/<image src='/images/back.png'></image></view><view class="tabar {{my_class ? 'tabar2':''}}" style="padding-top:{{bar_Height}}px;"><text class="red">{{title}}</text>/*标题*/</view></view></view>
js
Component({/* 组件的属性列表 */properties: {title: {// 设置标题type: String,value: ''},cover_state: {// 控制页面padding-toptype: Boolean,value: false},show_bol: {// 控制返回箭头是否显示type: Boolean,value: false},my_class: {// 控制样式type: Boolean,value: false}},/* 组件的初始数据 */data: {type: "组件",bar_Height: wx.getSystemInfoSync().statusBarHeight// 获取手机状态栏高度},/* 组件的方法列表 */methods: {goBack: function () {// 返回事件console.log("退后")wx.navigateBack({delta: 1,})}}})
wxss
/* 顶部导航 */.status-bar {width: 100%;z-index: 99999;position: fixed;top: 0;}.goBack{position: absolute;top: 15rpx;font-size:12pt;}.goBack image{width: 21rpx;height: 40rpx;padding: 12rpx 20px 0 30rpx;}.tabar {display: flex;justify-content: center;background-color: #fff;}.tabar2{background: transparent !important;}.tabar2 text{color: #fff !important;font-weight: lighter !important;}.tabar text {height: 44px;line-height: 44px;padding: 0 30rpx;color: #353535;font-size: 12pt;font-weight: bold;}.tabar .active {color: #fff;}
4:使用组件(一般都在内页才用到)
json
{"usingComponents": {"component": "/component/component" //component自定义名称 后面为组件路径}}
wxml
<component title='我是tabbar的页面' show_bol='{{false}}'></component> //show_bol为false 就是没有返回箭头<component title='我是带返回的页面' show_bol='{{true}}'></component> //show_bol为false 就是没有返回箭头
问题:
这里导航是出来了,但是会有个问题,导航嘛肯定是要固定定位的,所以他就脱离了文档流,组件放进去后,会悬浮在上面,遮挡了下面的内容,这时候就需要给父元素加个padding-top了
// e:1<view class='box-detail' style="padding-top:{{bar_Height + 45}}px;"><component title='EatUp趣味食光' show_bol='{{false}}'></component>......</view>// e:2<view class='box-detail' style="padding-top:{{widnowH <=568 ?bar_Height + 40:bar_Height + 45}}px;"><component title='EatUp趣味食光' show_bol='{{false}}'></component>......</view>
bar_Height
: wx.getSystemInfoSync().statusBarHeight (状态栏的高度)
widnowH
: wx.getSystemInfoSync().screenHeight (屏幕高度)
这里的padding-top的距离,就是状态栏的高度
+导航栏的高度
了,然后就可以很愉快的使用了,不过不同的机型还需要不同的适配,如果有更好的办法,可以给我讲解下,感谢大佬!