小程序自定义导航栏样式

继上一篇的《小程序----自定义tabbar》之后，再来聊一聊关于navgation的自定义。

通过官方文档。我们可以知晓导航栏是支持自定义的，但是具体的例子是没有的。

window配置

第一步，app.json中配置

    app.json

    {
        "window":{
            "backgroundTextStyle":"light",
            "navigationBarBackgroundColor": "#fff",
            "navigationBarTextStyle":"white",
            "navigationStyle":"custom" // 设置为自定义
          }
    }

第二步，自定义navgation的模板

进行该步骤时，我们需要明确的知晓小程序的navgation包含什么内容？

微信小程序结构

由官方给出的示意图我们可以看出navgationBar实际上是包含了两部分：状态栏，导航栏。因此自定义模板时不要忘记了状态栏哦！

知晓了包含的内容之后还有一点需要注意的就是在不同机型下，状态栏所呈现的高度是不一致的（其实还是 刘海屏下状态栏存在的差异）

苹果机型下：

搞清楚这些东西之后就是模板的搭建了：

    navrgation.wxml

    <template name="navigation">
        <view class="navigation_grounp">
            <view class="start_bar" style='height:{{startBarHeight}}px'></view>
            <view class="navigation" hover-class="none" hover-stop-propagation="false" style="height:{{navgationHeight}}px">
                <block wx:if="{{back}}">
                    <text class="nav_back">返回</text>
                </block>
                <text class="nav_title">{{title}}</text>
            </view>
        </view>
    </template>

相关样式：

    navrgation.wxss

    .navigation_grounp{
        position: fixed;
        top: 0;
        width: 100%;
    }
    .navigation_grounp .start_bar{
        background:#000;
        opacity: .5;

    }
    .navigation_grounp .navigation{
        display: flex;
        align-items: center;
        justify-content: flex-start;
        background: #000;
        box-sizing: border-box;
        padding: 0 15px;
        color: #fff;
    }
    .navigation .nav_back{
        width: 33.3%;
        overflow: hidden;
    }
    .navigation .nav_title{
        width: 33.3%;
        text-align: center;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }

获取设备信息用以设置startBar高度

    navgation.js

    function setNavigation() {  
        let startBarHeight = 20,navgationHeight = 44,heightGrounp;
        <!--获取设备信息-->
        wx.getSystemInfo({
            success: function (res) {
                if (res.model == 'iPhone X'){
                    startBarHeight = 44
                }
                heightGrounp = {
                    "startBarHeight":startBarHeight,
                    "navgationHeight":navgationHeight
                }
            }
        })
        return heightGrounp
    }
    module.exports = {
        setNavigation:setNavigation
    }

以page/index引入使用为例：

index.wxml

    import './template/navgation/index'
    <template is="navigation" data="{{...naviModal}}"></template>

index.js

    import { setNavigation } from '/template/navigation/index'

    Page({
        data:{
            naviModal:{
                startBarHeight:null,
                navgationHeight:null,
                back: true,
                title: "test0123test0123test0123test0123test0123test0123"
            }
        }

        /**
          * 生命周期函数--监听页面加载
          */
        onLoad: function () {
            let heightGrounp = setNavigation()
            this.setData({
              "naviModal.startBarHeight": heightGrounp.startBarHeight,
              "naviModal.navgationHeight": heightGrounp.navgationHeight
            })
        },
    })

至此，小程序中自定义navgation完成。实现效果如下：

ipnoeX

ipnoe other

你的点赞是我分享的动力。喜欢就点个赞吧！！！