更新

components/navbar/navbar.js

@@ -0,0 +1,46 @@
+const app = getApp()
+Component({
+  properties: {
+    navbarData: { //navbarData   由父页面传递的数据，变量名字自命名
+      type: Object,
+      value: {},
+      observer: function (newVal, oldVal) {}
+    }
+  },
+  data: {
+    height: '',
+    //默认值  默认显示左上角
+    navbarData: {
+      showCapsule: 1,
+      showMess: 1
+    }
+  },
+  attached: function () {
+    // 获取是否是通过分享进入的小程序
+    this.setData({
+      share: app.globalData.share
+    })
+    // 定义导航栏的高度   方便对齐
+    this.setData({
+      height: app.globalData.height
+    })
+  },
+  methods: {
+    // 返回上一页面
+    _navback() {
+      wx.navigateBack()
+    },
+    _navbackMess() {
+      wx.navigateTo({
+        url: '/pages/messageInfo/index'
+      })
+    },
+    //返回到首页
+    _backhome() {
+      wx.switchTab({
+        url: '/pages/index/index',
+      })
+    }
+  }
+
+})

components/navbar/navbar.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

components/navbar/navbar.wxml

@@ -0,0 +1,15 @@
+<view class='nav-wrap' style='height: {{height*2 + 80}}rpx;'>
+	<view class='nav-title' style='line-height: {{height*2 + 44}}px;'>{{navbarData.title}}</view>
+	<view style='display: flex; justify-content: space-around;flex-direction: column'>
+		<view class='nav-capsule' style='height: {{height*2 + 44}}px;' wx:if='{{navbarData.showCapsule}}'>
+			<view bindtap='_navbackMess' wx:if='{{!share}}' style="width:50px;padding:0 0 0 30rpx;">
+				<image src='/images/notice.png' style="width:44rpx;height:44rpx;margin-top:10rpx;"></image>
+			</view>
+		</view>
+		<view class='nav-capsule' style='height: {{height*2 + 44}}px;' wx:if='{{navbarData.showBack}}'>
+			<view bindtap='_navback' wx:if='{{!share}}' style="width:50px;padding:0 0 0 30rpx;">
+				<van-icon name="arrow-left" />
+			</view>
+		</view>
+	</view>
+</view>

components/navbar/navbar.wxss

@@ -0,0 +1,36 @@
+/* 顶部要固定定位   标题要居中   自定义按钮和标题要和右边微信原生的胶囊上下对齐 */
+.nav-wrap {
+  position: fixed;
+  width: 100%;
+  top: 0;
+  background: #fff;
+  color: #000;
+  z-index: 9999999;
+}
+/* 标题要居中 */
+.nav-title {
+  position: absolute;
+  text-align: center;
+  max-width: 400rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  font-size: 36rpx;
+  color: #2c2b2b;
+  font-weight: 600;
+}
+
+.nav-capsule {
+  display: flex;
+  align-items: center;
+  margin-left: 30rpx;
+  width: 140rpx;
+  justify-content: space-between;
+  height: 100%;
+  position: relative;
+}