微信小程序-自定义导航栏

Posted 2023-03-17

参考技术A 自定义导航栏分两种，一种是单独某个页面做一个自定义导航；一种是所有页面的导航栏都是自定义样式

如果是所有页面的导航栏都要自定义，在app.json里找到window样式

"navigationStyle":"custom"

所有页面的就需要先自定义组件了，这里先不做详说，因为我目前项目中只是首页需要自定义导航栏，这里我先详说这个

这样当前页面自带的导航栏就没有了，然后需要你在wxml页面中就可以开始写样式了

<!-- 自定义导航栏 -->

    <view class="navStyle" style="height:navHeightpx">

      <view class="navFix" style="height:navHeightpx;margin-top:imgToppx;">

          <image src=""></image>

          <view style="margin-top:cityToppx;">

            全国

            cityName

          </view>

      </view>

    </view>

// 获取状态栏高度

        const statusBarHeight = wx.getSystemInfoSync();

        // 得到右上角菜单的位置尺寸

        const menuButtonObject = wx.getMenuButtonBoundingClientRect();

        console.log('右上角菜单的尺寸：',menuButtonObject);

        const top, height = menuButtonObject;

        // 计算导航栏的高度

        // 此高度基于右上角菜单在导航栏位置垂直居中计算得到

        const navBarHeight = height + (top - statusBarHeight) * 2;

        // 计算状态栏与导航栏的总高度

        const statusNavBarHeight = statusBarHeight + navBarHeight;

        this.setData(

            navHeight:statusNavBarHeight,

            imgTop:statusNavBarHeight-45,

            cityTop:statusNavBarHeight-45-25

        )