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

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

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

"navigationStyle":"custom"

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

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

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

    <view class="navStyle" style="height:{{navHeight}}px">

      <view class="navFix" style="height:{{navHeight}}pxmargin-top:{{imgTop}}px">

          <image src=""></image>

          <view style="margin-top:{{cityTop}}px">

            全国

            {{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

        })

效果展示

通过在界面素材中添加一个底部悬浮层，同时配置触发器行为打开悬浮层，实现一个底部悬浮层d神粗出的效果。

添加悬浮层

点击左侧导航栏的界面。

添加一个底部悬浮层。

触发器配置

注意：在检知升查器面板中的触发器设置面板创建触发器，可以对组件进行交互逻辑设置，或配合事件来进行动态数据 *** 作。

选中图标。

点击检查面板中的触发器。

创建触发器。

选中悬浮层中的微信图标。

点击检查面板中的触发器。

配置打开分搭瞎老享面板触发器。

微信小程序在手机上点击跳转闪退的原因，由于服务器端环境产生了变化，小程粗歼序里调用跳磨手转接口时，微信页面一闪而过，后面把生成小程序跳转代岩游冲码修改正确就行。或是这个API只是调起了客户端扫码界面，扫码成功后返回对应的结果.微信小程序中并没有提供打开链接的API。

---