tabbar自定义头部

README.md

@@ -56,6 +56,8 @@
 
 ​	account_list:[] -- 角色列表
 
+​	myNavBorHeight -- 自定义头部高度
+
 # wxss
 
 ​	css/form.wxss -- 表单样式 登录
@@ -66,13 +68,13 @@
 
 # js文件
 
-Http.js 封装请求
+​	Http.js 封装请求
 
-api.js 封装接口
+​	api.js 封装接口
 
-md5.js 表单加密
+​	md5.js 表单加密
 
-verify.js 表单验证
+​	verify.js 表单验证
 
 # UI组件库修改
 

app.js

@@ -1,9 +1,28 @@
 // app.js
 App({
   onLaunch() {
+    /* 计算tabbar+iphone安全距离  tabbar页面+100rpx*/
+    let safeAreaBottom = 0,
+      capsule = wx.getMenuButtonBoundingClientRect(),
+      height = 200,
+      that = this;
+      
+    wx.getSystemInfo({
+      success(res) {
+        //计算底部安全距离高度
+        // safeAreaBottom += res.screenHeight - res.safeArea.height;
+        //计算自定义导航的高度
+        height = capsule.height + res.statusBarHeight + (capsule.top - res.statusBarHeight) + 8;
+        that.globalData.safeAreaBottom = safeAreaBottom;
+        //判断是否为平板
+        if (res.model.slice(0, 4) == "iPad") return that.globalData.myNavBorHeight = height;
+        that.globalData.myNavBorHeight = height * 2;
+      }
+    })
 
   },
   globalData: {
-    account_list:[],//用户列表
+    myNavBorHeight: null, //自定义头部导航高度
+    account_list: [], //用户列表
   }
 })

app.json

@@ -49,7 +49,8 @@
         "van-tab": "@vant/weapp/tab/index",
         "van-tabs": "@vant/weapp/tabs/index",
         "van-action-sheet": "@vant/weapp/action-sheet/index",
-        "My_Checkbox": "/components/My_Checkbox/index"
+        "My_Checkbox": "/components/My_Checkbox/index",
+        "My_navBar": "/components/My_navBar/index"
     },
     "window": {
         "backgroundTextStyle": "light",

components/My_GeneralTemplate/index.js

@@ -5,12 +5,16 @@ Component({
      */
     properties: {
         /* 盒子下内边距 */
-        padBot:{
-            type:String
+        padBot: {
+            type: String
         },
-        padTop:{
-            type:String,
-            value:"40rpx"
+        padTop: {
+            type: String,
+            value: "40rpx"
+        },
+        NavHeight: {
+            type: Number,
+            value: 0
         }
     },
 
@@ -27,4 +31,4 @@ Component({
     methods: {
 
     }
-})
+})

components/My_navBar/index.js

@@ -0,0 +1,41 @@
+// components/My_navBar/index.js
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+
+    },
+    lifetimes: {
+        attached: function () {
+            // 在组件实例进入页面节点树时执行
+            //获取当前登录用户名
+            const userName = getApp().globalData.accountList[wx.getStorageSync('userIndex')].fname;
+            this.setData({
+                userName
+            })
+        },
+        detached: function () {
+            // 在组件实例被从页面节点树移除时执行
+        },
+    },
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        userName: "", //用户名
+        NavHeight: getApp().globalData.myNavBorHeight, //头部导航高度
+        capsule: wx.getMenuButtonBoundingClientRect(), //胶囊位置
+    },
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        a1212() {
+            //跳转到选择账号
+            wx.navigateTo({
+                url: '/pages/login/index?type=' + 2,
+            })
+        }
+    }
+})

components/My_navBar/index.json

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

components/My_navBar/index.wxml

@@ -0,0 +1,12 @@
+<view class="header_nav" style="height:{{NavHeight}}rpx;">
+    <view class="header_nav_title" style="height: {{capsule.height}}px;top:{{capsule.top}}px">
+        布万家
+        <view class="header_user_choice" bindtap="a1212">
+            {{userName}}
+            <van-icon name="arrow-down" />
+        </view>
+    </view>
+</view>
+<!-- 占位 -->
+<view style="height:{{NavHeight}}rpx;">
+</view>

components/My_navBar/index.wxss

@@ -0,0 +1,24 @@
+.header_nav {
+    position: fixed;
+    width: 100vw;
+    background-color: #3CC1CE;
+    top: 0;
+    left: 0;
+    z-index: 99999;
+}
+/* 标题 */
+.header_nav_title {
+    position: absolute;
+    display: flex;
+    width: 100%;
+    font-size: 28rpx;
+    align-items: center;
+    justify-content: center;
+    color: #ffffff;
+}
+/* 左侧账号选择 */
+.header_user_choice{
+    position: absolute;
+    font-size: 26rpx;
+    left: 30rpx;
+}

pages/tabbar-pages/customer-service-staff/index.json

@@ -1,3 +1,4 @@
 {
+  "navigationStyle": "custom",
   "usingComponents": {}
 }

pages/tabbar-pages/customer-service-staff/index.wxml

@@ -1,2 +1,2 @@
-<!--pages/tabbar-pages/customer-service-staff/index.wxml-->
-<text>pages/tabbar-pages/customer-service-staff/index.wxml</text>
+<!-- 自定义头部 -->
+<My_navBar></My_navBar>

pages/tabbar-pages/home/index.json

@@ -1,3 +1,4 @@
 {
+  "navigationStyle": "custom",
   "usingComponents": {}
 }

pages/tabbar-pages/home/index.wxml

@@ -1,2 +1,2 @@
-<!--pages/tabbar-pages/home/index.wxml-->
-<text>pages/tabbar-pages/home/index.wxml</text>
+<!-- 自定义头部 -->
+<My_navBar></My_navBar>

pages/tabbar-pages/message/index.json

@@ -1,3 +1,4 @@
 {
+  "navigationStyle": "custom",
   "usingComponents": {}
 }

pages/tabbar-pages/message/index.wxml

@@ -1,2 +1,2 @@
-<!--pages/tabbar-pages/message/index.wxml-->
-<text>pages/tabbar-pages/message/index.wxml</text>
+<!-- 自定义头部 -->
+<My_navBar></My_navBar>

pages/tabbar-pages/supplyAndDemand/index.json

@@ -1,4 +1,5 @@
 {
+  "navigationStyle": "custom",
   "usingComponents": {
     "My_SupplyAndDemandItemBox": "/components/My_SupplyAndDemandItemBox/index",
     "My_adsorbRight": "/components/My_adsorbRight/index"

pages/tabbar-pages/supplyAndDemand/index.wxml

@@ -1,3 +1,6 @@
+<!-- 自定义头部 -->
+<My_navBar></My_navBar>
+<!-- banner -->
 <view class="supplyAndDemandBanner">
     <swiper class="swiperBanner" autoplay indicator-dots circular="true" indicator-active-color="#fff">
         <swiper-item wx:for="{{swiperBannerList}}" wx:key="index">

pages/tabbar-pages/user/index.js

@@ -8,6 +8,7 @@ Page({
      * 页面的初始数据
      */
     data: {
+        NavHeight: getApp().globalData.myNavBorHeight, //头部导航高度
         /* 宫格列表 */
         gridList: [{
             id: '001',

pages/tabbar-pages/user/index.json

@@ -1,5 +1,4 @@
 {
-  "usingComponents": {
-
-  }
+  "navigationStyle": "custom",
+  "usingComponents": {}
 }

pages/tabbar-pages/user/index.wxml

@@ -1,4 +1,6 @@
-<My_GeneralTemplate padBot="20rpx">
+<!-- 自定义头部 -->
+<My_navBar></My_navBar>
+<My_GeneralTemplate padBot="20rpx" NavHeight="{{NavHeight}}">
     <!-- 用户头部 -->
     <view class="user_header">
         <view class="user_header_msg">