微信小程序怎么自定义导航栏

1、第一先获取状态栏和胶囊的高度、

  /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
            this.getHei()
        this.getIntegralShop()
        this.getUserInfo()
        this.setData({
            //    状态栏的高度
            statusBarHeight: wx.getSystemInfoSync()['statusBarHeight'] + 'px',
            //    胶囊的高度 也就是自定导航栏的高度
            navheight: wx.getMenuButtonBoundingClientRect()['height'] + 'px',
            //    状态栏加胶囊的高度 加上下的padding的高度 12
            pagetop: wx.getMenuButtonBoundingClientRect()['height'] + 

            wx.getSystemInfoSync()['statusBarHeight'] + 12 + 'px',
            baseUrl:getbaseUrl()+'/image/'
        })
        // console.log(this.data.statusBarHeight)
        // console.log(this.data.navheight)
        // console.log(this.data.pagetop)
    },

    //并且监听页面的滚动

      onPageScroll(e){
        // console.log(e.detail.scrollTop)
        this.setData({
            scrollTop:e.detail.scrollTop
            })
        },

2、html的结构

    
 <view class="navibg {{scrollTop>10?'navstyl':'nonavstyl'}}">
          //状态栏的高度，主要是用来占坑
        <view style="height:{{statusBarHeight}};"></view>
        <view class="backBot">
            <view class="iconfont1" catchtap="goBack">
                <text class="bot1 iconfont icon-zuo {{scrollTop>10?'bot3':'bot2'}}"></text>
            </view>
            <view  class="{{scrollTop>10?'naviName':'nonaviName'}}">
                积分商城
            </view>
            <view style="width: 140rpx;"></view>
        </view>
    </view>

3、相关样式

/* pages/integralShop/integralShop.wxss */

.integral .navibg{
    width: 100%;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 999;
}
.integral .navibg .backBot{
    display: flex;
    /* line-height: 32px; */
    padding: 12rpx 0;
}
.integral .navibg .backBot .iconfont1{
    width: 140rpx; 
    display: flex;
    align-items: center;
    justify-content: center;
}
.integral .navibg .backBot .iconfont1 .bot1{
    display: flex;
    align-items: center;
    font-size: 40rpx;
    padding: 20rpx;
    line-height: 64rpx;
    color: #fff;
    border-radius: 50%;
    width: 30rpx;
    height: 30rpx;
}
.integral .navibg .backBot .iconfont1 .bot2{
    color: #fff;
    background-color: rgba(0,0,0,.5);
}
.integral .navibg .backBot .iconfont1 .bot3{
    color: #000;
}
.integral .navibg .backBot .naviName{
    flex: 1;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height:64rpx ;
    transition: all 1.5s;
}
.integral .navibg .backBot .nonaviName{
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    opacity: 0;
    text-align: center;
}