no message

components/Nav/Nav.vue

@@ -1,86 +0,0 @@
-<template>
-	<view class="nav-moudle" :class="{'bottom-border':border}" :style="{'background-color':backColor}">
-		<view class="left-button button" @click="leftClick">
-			<slot name="left" v-if="leftShow">
-				<image :src="imgurl" class="icon-left">
-				</image>
-			</slot>
-		</view>
-		<view class="title-text" :style="{'color':titleColor}">
-			{{title}}
-		</view>
-		<view class="right-button button" @click="rightClick">
-			<slot name="right" v-if="rightShow">
-				<image src="../../static/tabBar/business.png" class="icon-right"></image>
-			</slot>
-		</view>
-	</view>
-</template>
-
-<script>
-	export default {
-		props: {
-			title: {
-				type: String,
-				default: '标题'
-			},
-			titleColor: {
-				type: String,
-				default: '#333'
-			},
-			backColor: {
-				type: String,
-				default: '#fff'
-			},
-			leftShow: {
-				type: Boolean,
-				default: true
-			},
-			rightShow: {
-				type: Boolean,
-				default: false
-			},
-			border: {
-				type: Boolean,
-				default: true
-			},
-			imgurl: {
-				type: String,
-				default: require('../../static/home/retreat.png')
-			}
-		},
-		methods: {
-			leftClick() {
-				this.$emit('leftClick')
-			},
-			rightClick() {
-				this.$emit('rightClick')
-			},
-		},
-	}
-</script>
-
-<style scoped lang="scss">
-	.nav-moudle {
-		display: flex;
-		align-items: center;
-		padding: 0 12px 0 12px;
-		height: 44px;
-
-		.title-text {
-			flex: 1;
-			text-align: center;
-			font-size: 17px;
-			font-weight: 600;
-		}
-
-		.icon-left {
-			width: 20px;
-			height: 20px;
-		}
-	}
-
-	.button {
-		width: 21px;
-	}
-</style>

components/en-nav/en-nav.vue

@@ -0,0 +1,144 @@
+<template>
+  <view class="">
+    <view class="header" :style="style">
+      <view class="flexbox"
+        :style="[{'height': customBarH + 'px', 'padding-top': statusBarH + 'px','background':bgckgroundBox}]">
+        <view @tap="goBack">
+          <text  class="iconfont" v-if="leftShow">
+            &#xe60e;
+          </text>
+        </view>
+        <!-- <view v-if="false">
+
+        </view> -->
+        <view class="title-text" :style="[{'marginLeft':left +'px'}]">{{title}}</view>
+        <view style="width: 36px;"></view>
+      </view>
+    </view>
+    <view class="box">
+      <view class="" :style="[{'height': customBarH + 'px', 'padding-top': statusBarH + 'px'}]">
+      </view>
+    </view>
+  </view>
+
+
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        statusBarH: 0,
+        customBarH: 0,
+        left: 35
+      }
+    },
+    props: {
+      title: {
+        type: String,
+        default: ''
+      },
+      leftShow: {
+        type: Boolean,
+        default: true
+      },
+      imgurl: {
+        type: String,
+        default: require('../../static/home/retreat.png')
+      },
+      bgckgroundBox: {
+        type: String,
+        default: '#fff'
+      },
+      // titleColor: {
+      //   type: String,
+      //   default: '#fff'
+      // },
+      // bgColor: {
+      //   type: String,
+      //   default: '#707'
+      // },
+    },
+    computed: {
+      style() {
+        let _style = `height: ${this.customBarH}px;`
+        return _style
+      }
+    },
+    watch: {
+      leftShow(e) {
+        if (e == true) {
+          this.left = 0
+        }
+      }
+    },
+    methods: {
+      goBack() {
+        if(!this.leftShow){
+          return ;
+        }
+        this.$emit('leftClick')
+      }
+    },
+    created() {
+      let self = this;
+      uni.getSystemInfo({
+        success: function(e) {
+          self.statusBarH = e.statusBarHeight + 10
+          let custom = wx.getMenuButtonBoundingClientRect()
+          self.customBarH = custom.height
+        }
+      })
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @font-face {
+    font-family: 'iconfont';
+    src: url('./iconfont.ttf') format('truetype');
+  }
+  .iconfont {
+    font-family: "iconfont" !important;
+    font-size: 36rpx;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    color: #000;
+  }
+  .header {
+    width: 100vw;
+    position: fixed;
+    left: 0;
+    top: 0;
+    // background: #fff;
+    // position: relative;
+    z-index: 999999;
+  }
+
+  .box {
+    width: 100vw;
+    // background: #fff;
+  }
+
+  .flexbox {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 20px;
+    // background: #fff;
+    //background: pink;
+
+    .title-text {
+      // flex: 1;
+      font-size: 36rpx;
+      font-weight: bold;
+      font-weight: 600;
+      // background: #fff;
+    }
+
+    .icon-left {
+      width: 20px;
+      height: 20px;
+    }
+  }
+</style>

main.js

@@ -9,7 +9,7 @@ Vue.use(router)
 // #ifndef VUE3
 import Vue from 'vue'
 import store from './store'
-import Nav from './components/Nav/Nav.vue'
+import Nav from './components/en-nav/en-nav.vue'
 
 Vue.component('Nav', Nav)
 Vue.config.productionTip = false

manifest.json

@@ -50,7 +50,7 @@
     "quickapp" : {},
     /* 小程序特有相关 */
     "mp-weixin" : {
-        "appid" : "wx1af297bbe8ef0f9c",
+        "appid" : "wxe041e2fba8e6599f",
         "setting" : {
             "urlCheck" : false,
             "minified" : true

pages/index/index.vue

@@ -1,25 +1,26 @@
 <template>
 	<view class="">
-		首页
+    <Nav title="首页"></Nav>
+		首页21312
 	</view>
 </template>
 <script>
-	
+
 
 	export default {
 		components: {
-			
+
 		},
 		data() {
 			return {
-				
+
 			}
 		},
 		mounted() {
 
 		},
 		methods: {
-			
+
 
 		},
 	}