原生小程序---自定义导航栏以及使用van-popup左侧半屏

效果图

就是这样的效果。。。。，复制下面的代码，调试调试就能直接使用

上代码

图一代码

对于的json文件必须要有这个属性 "navigationStyle": "custom",

wxml

xml 复制代码

<image class="indexBg" src="../../image/indexBg.png" mode="" />
<!-- 放入顶部即可 -->
<watermark name=""></watermark>
<view class="navbar" style="height:{{navHeight+5}}px; ">
  <view class="navBody" style="height:{{navHeight+5-statusBarHeight}}px; margin-top: {{statusBarHeight}}px;">
    <image class="navbar_left" style="top:{{navTop}}px;height:{{jnheight-1}}px;width:{{jnwidth-52}}px" src="../../image/indexUser.png" mode="aspectFit" bindtap="openUsers"></image>
    <view class="navbar_title" style="top:{{navTop}}px;">
      <!-- <image src="../../image/login2.png" mode="" /> -->
    自定义的导航栏
    </view>
  </view>
</view>
<!-- wx:if="{{leftPopup}}" -->
<leftPopupPro id="myChild" bindclosePopup="handleClosePopup" />

wxss css自己写也行

css 复制代码

.indexBg {
  width: 100%;
  height: 100%;
  position: fixed;
}

.navbar {
  width: 100%;
  overflow: hidden;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 10;
  flex-shrink: 0;
}
.navBody{
  display: flex;
  align-items: center;
}
.navbar_left {
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  position: absolute;
  left: 34rpx;
  z-index: 11;
  line-height: 1;
  overflow: hidden;
  width: 64rpx;
  height: 64rpx;
}

.navBack image {
  width: 60%;
}

.navbar_left view {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav_line {
  border-left: 1rpx solid #f0f0f0;
}

.navbar_title {
  width: 100%;
  box-sizing: border-box;
  padding-left: 90px;
  padding-right: 140px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  position: absolute;
  left: 0;
  z-index: 10;
  color: #333;
  font-size: 16px;
  font-weight: bold;
  /* text-overflow: ellipsis; */
  overflow: hidden;
  white-space: nowrap;
}

.navbar_title image{
width: 328rpx;
height: 50rpx;
line-height: 50rpx;
}

js代码

javascript 复制代码

var app = getApp()
Page({

  handleClosePopup() {
    // 处理子组件关闭 Popup 弹窗的事件
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    this.setData({
      statusBarHeight: app.globalData.statusBarHeight, //状态栏高度
      navHeight: app.globalData.navHeight, //导航栏高度
      navTop: app.globalData.navTop, //胶囊按钮与顶部的距离
      jnheight: app.globalData.jnheight, //胶囊高度
      jnwidth: app.globalData.jnwidth //胶囊宽度
    })
  },
})

图二（封装成弹窗组件）

wxml

xml 复制代码

<!-- 左侧弹出 -->
<van-popup show="true" position="left" closeable custom-style="height: 100%;width: 90%;">
  <view class="navbar" style="height:{{navHeight+5}}px; ">
    <view class="navBody"
    style="height:{{navHeight+5-statusBarHeight}}px; margin-top: {{statusBarHeight}}px;">
      <view class="navbar_left">
        <text class="navbar_leftImg" style="top:{{navTop}}px;height:36rpx;width:18rpx">
         返回
        </image>
      </view>
    </view>
  </view>
  <view class="contentbox" style="height: calc( 100% - {{navHeight+5}}px )">
  </view>
</van-popup>

wxss css自己写也行

css 复制代码

.navbar {
  width: 100%;
  overflow: hidden;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 10;
  flex-shrink: 0;
  background: #fff;
}
.navBody{
  display: flex;
  align-items: center;
  background: #fff;
}
.navbar_left {
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  position: absolute;
  left: 34rpx;
  z-index: 11;
  line-height: 1;
  overflow: hidden;
  width: 106rpx;
  height: 64rpx;
  background: rgba(255,255,255,0.6);
  border-radius: 25px;
  border: 1px solid rgba(151,151,151,0.2);
}
.navbar_leftImg{
width: 18rpx;
height: 34rpx;
opacity: 0.9;
margin: 0 auto;
}
.contentbox{
  position: relative;
  height: 100%;
}

js代码

javascript 复制代码

const app = getApp()
Component({
  lifetimes: {
    attached: function () {
      this.setData({
        statusBarHeight: app.globalData.statusBarHeight, //状态栏高度
        navHeight: app.globalData.navHeight, //导航栏高度
        navTop: app.globalData.navTop, //胶囊按钮与顶部的距离
        jnheight: app.globalData.jnheight, //胶囊高度
        jnwidth: app.globalData.jnwidth, //胶囊宽度
      })
    }
  },
})