应用场景:我们在小程序中想要自定义导航栏(当然组件库更方便哈哈)
⭐⭐⭐
官方文档介绍的有:
"navigationStyle": "custom"
这样原本默认的导航栏就会消失了
PS: 如果是单页面需要就写在对应页面的json内,如果全局需要就写在app.josn内
⭐⭐⭐
在app.js
里面获取statusbarHeight(这个就是每种机型的导航高度,我们需要获取并且动态的展示)
wx.getSystemInfo
获取。
我们要在对应该导航组件的js
文件里面进行获取
data
中定义一个数据app.js
中获取statusBarHeight
,存储到data
中在wxml
里面动态的使用该数据
这样机型适配就完成啦o( ̄︶ ̄)o
⭐⭐⭐⭐⭐
这里我们使用了插槽(可以看看插槽的内容)
<!--components/nav-bar/nav-bar.wxml--> <view class="nav-bar"> <view class="status" style="height: {{statusHeight}}px;"></view> <view class="nav"> <view class="left"> <view class="slot"> <slot name="left"></slot> </view> <view class="default"> <image class="icon" src="/assets/images/icons/arrow-left.png"></image> </view> </view> <view class="center"> <view class="slot"> <slot name="center"></slot> </view> <view class="default"> {{title}} </view> </view> <view class="right"></view> </view> </view>
⭐⭐⭐
/* components/nav-bar/nav-bar.wxss */ /* 自定义导航 */ .nav { display: flex; height: 44px; color: #fff; } .left, .right, .center { display: flex; justify-content: center; align-items: center; } .nav .left, .nav .right { width: 120rpx; } .nav .center { flex: 1; } /* 控制内容显示 */ .left .icon { width: 40rpx; height: 40rpx; } .default { display: none; } .slot:empty + .default { display: flex; }
// components/nav-bar/nav-bar.js const app = getApp() Component({ options: { multipleSlots: true }, properties:{ title: { type: String, value: "导航标签" } }, data:{ statusHeight:20 }, lifetimes: { attached(){ this.setData({statusHeight: app.globalData.statusHeight}) } } })
⭐⭐⭐
因为插槽的使用,这里就很方便了,如果添加内容,那么就会显示默认插槽
这就是大概的效果了,当然文字箭头这里都是可以自定义的hh