框架修改

app.js

@@ -10,15 +10,13 @@ App({
     //获取设备顶部窗口的高度（不同设备窗口高度不一样，根据这个来设置自定义导航栏的高度
     wx.getSystemInfo({
       success: (res) => {
-        this.globalData.client = {
-          //  窗口宽度和高度
-          windowWidth: res.windowWidth,
-          windowHeight: res.windowHeight,
-          // 状态栏高度
-          statusBarHeight: res.statusBarHeight
-        }
+        let data = res;
+        data.getMenu = wx.getMenuButtonBoundingClientRect();
+        // console.log(data.statusBarHeight + data.getMenu.height + (data.getMenu.top - data.statusBarHeight)*2);
+        this.globalData.client = data
       }
     })
+
   },
   globalData: {
     userInfo: {},

app.json

@@ -1,5 +1,6 @@
 {
   "pages": [
+    "pages/login/index",
     "pages/test/index",
     "pages/index/index"
   ],

commpents/mobile-frame/mobile-main.js

@@ -41,7 +41,9 @@ Component({
     searchHeight() {
       let frameStyle = this.properties.frameStyle;
       let client = app.globalData.client;
-      let infoHeight = client.windowHeight - 25 - client.statusBarHeight * 2;
+      // 减去状态栏
+      let infoHeight = client.windowHeight - (client.statusBarHeight + client.getMenu.height + (client.getMenu.top - client.statusBarHeight) * 2);
+      // 是否减去底部菜单
       if (frameStyle.useBar) infoHeight = infoHeight - 50;
       if (infoHeight) this.setData({ infoHeight: infoHeight })
     }

commpents/mobile-frame/top.js

@@ -11,7 +11,7 @@ Component({
    * 组件的初始数据
    */
   data: {
-    statusBarHeight: app.globalData.client.statusBarHeight
+    client: app.globalData.client
   },
 
   /**

commpents/mobile-frame/top.wxml

@@ -1,7 +1,7 @@
-<view class="top" style='height: {{statusBarHeight*2 + 25}}px;line-height:{{statusBarHeight*2 + 35}}px'>
-  <view class="left" style='height: {{statusBarHeight*2 + 25}}px;padding: {{statusBarHeight + 12}}px 0;'>
+<view class="top" style='height: {{client.statusBarHeight + client.getMenu.height + (client.getMenu.top - client.statusBarHeight)*2}}px;'>
+  <view class="left" style='margin: {{client.getMenu.top}}px 0 0 0;'>
     <cover-image src='/image/back.png' mode='aspectFill' class="back" bindtap='_navback' wx:if="{{frameStyle.leftArrow}}"></cover-image>
   </view>
-  <view class="cen" style='height: {{statusBarHeight*2 + 25}}px;'>{{frameStyle.name}}</view>
-  <view class="right" style='height: {{statusBarHeight*2 + 25}}px;' style="display: none">右侧</view>
+  <view class="cen" style='margin: {{client.getMenu.top}}px 0 0 0;'>{{frameStyle.name}}</view>
+  <view class="right" style="display: none">右侧</view>
 </view>

commpents/mobile-frame/top.wxss

@@ -1,14 +1,14 @@
 .top {
   float: left;
   width: 100%;
-  border-bottom: 1px solid #666;
-  background-color: #409eff;
+  background-color: #409eff9f;
 }
 
 .top .left {
   float: left;
   width: 15%;
   text-align: center;
+  overflow: hidden;
 }
 
 .top .left .back {

pages/login/index.js

@@ -0,0 +1,67 @@
+// pages/login/login.js
+import * as methods from '../../utils/login'
+const app = getApp()
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    frameStyle: { useTop: true, name: '登录', leftArrow: false, useBar: false }
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/login/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "mobile-main": "/commpents/mobile-frame/mobile-main"
+  }
+}

pages/login/index.wxml

@@ -0,0 +1,5 @@
+<mobile-main frameStyle="{{frameStyle}}" bind:back="back">
+  <view slot="info">
+    测试
+  </view>
+</mobile-main>

pages/login/index.wxss

@@ -0,0 +1,18 @@
+.one {
+  float: left;
+  width: 100%;
+}
+
+.one .one_1 {
+  float: left;
+  width: 100%;
+  text-align: center;
+  margin: 20px 0;
+  font-size: 25px;
+}
+
+.one .one_2 {
+  float: left;
+  width: 100%;
+  text-align: center;
+}