Micro letter applet capsules button to return | Home custom navigation bar Comments

Brother small initial study program, I hope to see big brother pointed out problem areas in a timely manner, thanks

Item Code: https: //github.com/Shay0921/header-navbar.git

In the applet, applet from forwarding the message out into the card, because the page is only one stack, so no back button, for some electronic business platform, when the goods will be forwarded affect the customer view and other products Home, this time you need to use a custom navigation bar to write a "capsule button." As shown below:

From another point there will be back and home page button to the product page;

When entering from page to share product page, because the page is only one stack, so only the home button;

First, we need to turn on how to customize the navigation bar, the view will find a page manual configuration item: navigationStyle

The previous version of this configuration item can be configured only app.js, the attribute is global, and can now be configured in a separate page json, the realization of individual pages custom navigation bar.

the whole idea

When the navigationStyle: custom post, before the top title bar will be deleted, capsules button to the right will be fixed in the upper right corner. Then add the current page three view (the status bar, title bar, the main content), you can see the layout of three, I write directly to the height of death: the status bar 20px, the title bar 44px. This is the key definitions from the navigation bar, you need to calculate the height of these two, as well as return | HOME button capsule. Foundation libraries 2.1.0 can be used wx.getMenuButtonBoundingClientRect () to obtain location information button on the right side of the capsule , and with this information, we can calculate the relative position we want to add a button on the left side of the capsule. Through to find the height of the status bar () in wx.getSystemInfoSync statusBarHeight .

Directory Structure

├── components                  组件
│  ├── headerNavbar             顶部自定义导航栏
│  │  └── headerNavbar.js
│  │  └── headerNavbar.json
│  │  └── headerNavbar.wxml
│  │  └── headerNavbar.wxss
├── pages                       页面
│  ├── index                    首页
│  │  └── index.js
│  │  └── index.json
│  │  └── index.wxml
│  │  └── index.wxss
│  ├── navigationStyle          引入自定义导航栏的页面(单独配置了navigationStyle)
│  │  └── navigationStyle.js
│  │  └── navigationStyle.json
│  │  └── navigationStyle.wxml
│  │  └── navigationStyle.wxss
│  │  └── testPage.js           路由测试页面(后面用来测试跳转显示不同胶囊按钮)
│  │  └── testPage.json
│  │  └── testPage.wxml
│  │  └── testPage.wxss复制代码

Global Variables

app.js

App.js obtained in the first status bar height and position information of the capsule right

App({
    onLaunch: function (options) {
      // 这里省略掉了登录和获取用户信息等函数
      // 因为我在别的页面也需要使用此信息，所以没有单独获得 statusBarHeight
      wx.getSystemInfo({ // 获取设备信息
        success: (res) => {
          this.globalData.systeminfo = res
        },
      })
      // 获得胶囊按钮位置信息
      this.globalData.headerBtnPosi = wx.getMenuButtonBoundingClientRect()
    },
    globalData: {
        systeminfo: {}, // 系统信息
        headerBtnPosi: {} // 胶囊按钮位置信息
    }
})
复制代码

It should be noted wx.getMenuButtonBoundingClientRect (), as there are not as wx.getSystmInfo success callback, but like objects wx.getMenuButtonBoundingClientRect (). Height to use.

Component code

headerNavbar.wxml

<!-- 自定义导航栏 -->
<view class='navbar-wrap' 
  style='height:{{navbarHeight}}px;padding-top:{{statusBarHeight}}px;'>  
  <view class="navbar-text"
    style='line-height:{{navbarBtn.height + navbarBtn.top}}px;'>
    {{navbarData.title ? navbarData.title : "默认标题"}}{{navbarHeight}}
  </view>
  <view class="navbar-icon"
    wx:if='{{navbarData.showCapsule ? navbarData.showCapsule : true}}'
    style="top:{{navbarBtn.top + statusBarHeight}}px;left:{{navbarBtn.right}}px;height:{{navbarBtn.height}}px;"> 
      <image wx:if='{{haveBack}}' bindtap="_goBack" class="floatL" src="/img/navbar_back_white.png"></image>      
      <view wx:if='{{haveBack}}' class="floatL"></view>
      <image bindtap="_goHome" src="/img/navbar_home_white.png"></image>
  </view>
</view>
<!-- 手写loading -->
<view class="navbar-loading" style='height:{{navbarHeight}}px;line-height:{{navbarHeight}}px;'>
  <text>...</text>
</view>复制代码

In order to fit different screen phone, the location and height of the capsule buttons are required in the html inside an assignment , the following will explain in detail how to calculate the height. In the custom navigation bar component is divided into two parts, one is the navigation bar on top of another write their own loading.

Because the custom navigation bar is fixed to the top, in order to ensure that no blocking below the main content, we need to add a navigation bar with the same height between the navigation bar and the main content , class called the first box. This will ensure that the navigation bar is not blocked off main content. But there will be another problem, if the pull-down refresh this page support, then the navigation will applet loading native style block, in front of the main content will be a blank box, although not affect the use, but appears to the user will be very strange, inexplicable extra one, box will only go up at the end of loading . So here we need their own handwriting a loading animation on the bottom components, like the height of the navigation bar.

Here you can see the final results, three points below the blue navigation bar is a small native program loading, and then the following three dots write their own loading.

And what we want is, when the applet is loading native time, write their own loading can replace native loading

headerNavbar.js

The status bar height = app.globalData.systeminfo.statusBarHeight

Note capsule position information of the origin is in the upper left corner of the page , you need to convert it, the original location information of the capsule named capsule, now called the capsule after conversion.

/*** iphone6 的胶囊位置信息
* wx.getMenuButtonBoundingClientRect() 坐标信息以屏幕左上角为原点
* 胶囊宽度： 87
* 胶囊高度： 32
* 胶囊左边界坐标： 278
* 胶囊上边界坐标： 26
* 胶囊右边界坐标： 365
* 胶囊下边界坐标： 58
* 状态栏高度：20*/复制代码

Margin = capsules on a boundary coordinates on the current capsule - the status bar height
to the right now capsule from = the screen width - Capsule right border coordinates of
the current capsule margin = capsules under boundary coordinates - the height of the status bar - Capsules height
boundary coordinates navigation height = capsules + under the current margin capsules

Note: The bounding coordinates capsule contains a status bar, the distance between the capsule and the capsule height and status bar height, because the capsule is centered in the navigation bar , so the margins should be consistent with lower margins, so is the boundary coordinates capsule - capsule height - the height of the status bar.

const app = getApp();
Component({
  properties: {
    navbarData: { // 由父页面传递的数据
      type: Object,
      value: {},
      observer: function (newVal, oldVal) { }
    }
  },
  data: {
    haveBack: true, // 是否有返回按钮，true 有 false 没有 若从分享页进入则为 false
    statusBarHeight: 0, // 状态栏高度
    navbarHeight: 0, // 顶部导航栏高度
    navbarBtn: { // 胶囊位置信息
      height: 0,
      width: 0,
      top: 0,
      bottom: 0,
      right: 0
    }
  },
  // 微信7.0.0支持wx.getMenuButtonBoundingClientRect()获得胶囊按钮高度
  attached: function () {
    let statusBarHeight = app.globalData.systeminfo.statusBarHeight // 状态栏高度
    let headerPosi = app.globalData.headerBtnPosi // 胶囊位置信息
    /**
     * wx.getMenuButtonBoundingClientRect() 坐标信息以屏幕左上角为原点
     * 菜单按键宽度： 87
     * 菜单按键高度： 32
     * 菜单按键左边界坐标： 278
     * 菜单按键上边界坐标： 26
     * 菜单按键右边界坐标： 365
     * 菜单按键下边界坐标： 58
     */
    let btnPosi = { // 胶囊实际位置，坐标信息不是左上角原点
      height: headerPosi.height,
      width: headerPosi.width,
      // 胶囊top - 状态栏高度
      top: headerPosi.top - statusBarHeight,
      // 胶囊bottom - 胶囊height - 状态栏height （现胶囊bottom 为距离导航栏底部的长度）
      bottom: headerPosi.bottom - headerPosi.height - statusBarHeight,
      // 屏幕宽度 - 胶囊right
      right: app.globalData.systeminfo.screenWidth - headerPosi.right
    }
    let haveBack;
    if (getCurrentPages().length === 1) { // 当只有一个页面时
      haveBack = false;
    } else {
      haveBack = true;
    }
    this.setData({
      haveBack: haveBack, // 获取是否是通过分享进入的小程序
      statusBarHeight: statusBarHeight,
      navbarHeight: headerPosi.bottom + btnPosi.bottom, // 原胶囊bottom + 现胶囊bottom
      navbarBtn: btnPosi
    })
  },
  methods: {
    _goBack: function () {
      wx.navigateBack({
        delta: 1
      });
    },
    _goHome: function () {
      wx.switchTab({
        url: '/pages/index/index',
      });
    }
  }
})
复制代码

By getCurrentPages () to determine whether the current page into the page from the share, because if the stack should only enter the page data from a shared page, jump to another page in the page stack length will increase , it will show other pages back and home buttons.

Note: micro-channel 7.0.0 support wx.getMenuButtonBoundingClientRect (), if you want low-compatible version of the micro-channel, only the height of the navigation bar-coded, by calculating the results of some of the chiefs of height:

'iPhone': 64,
'iPhone X': 88,
'android': 68

Specific View:

https://developers.weixin.qq.com/community/develop/doc/0006c012dc8028f04b070dd0551004

If you use wx.getMenuButtonBoundingClientRect () information obtained decimals , as shown below

{height: 24, width: 65.25, top: -0.5, bottom: -0.5, right: 101.25}

Then you may be in view of the development tools, scaled, reduced to 100% of normal.

headerNavbar.wxss

.navbar-wrap {
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 9999999;
	background-color: #3281FF;
	box-sizing: border-box;
}

.navbar-text {
	text-align: center;
	font-size: 36rpx;
	color: #fff;
	font-weight: 600;
}

.navbar-icon {
	position: fixed;
	display: flex;
	border-radius: 64rpx;
	border: 0.5px solid rgba(255,255,255, 0.3);
	box-sizing: border-box;
}

.navbar-icon image {
	height: 20px;
	width: 20px;
	padding: 5px 10px 10px;
	display: inline-block;
	overflow: hidden;
}

.navbar-icon view {
	height: 18px;
	border-left: 0.5px solid rgba(255,255,255, 0.3);
	margin-top: 6px;
}

.navbar-loading {
	background: #fff;
	text-align: center;
}
复制代码

Reference component page code

navigationStyle.json

{
    "navigationStyle": "custom", 
    "enablePullDownRefresh": true, 
    "backgroundTextStyle": "light", 
    "usingComponents": {
        "headerNavbar": "/components/headerNavbar/headerNavbar"
    }
}
复制代码

First in the need to use self-defined page json navigation bar to add navigationStyle: custom

enablePullDownRefresh: true open the drop-down refresh

backgroundTextStyle: light is the loading of style to white, so it will not show up loading of three points

navigationStyle.wxml

<headernavbar navbar-data="{{nvabarData}}"></headernavbar> 
<view class="home-page"> 
   <text>
    上面是自定义导航栏↑↑↑
   </text> 
   <text>
    下面是主体内容↓↓↓
   </text> 
   <navigator url="./testPage">
    跳转到测试页
   </navigator> 
</view>
复制代码

navigationStyle.js

Page({
    data: {
        // 组件所需的参数
        nvabarData: {
            showCapsule: 1,
            // 是否显示左上角胶囊按钮 1 显示 0 不显示
            title: '组件列表' // 导航栏 中间的标题
        }
    },

    onPullDownRefresh() {
        setTimeout(() = >{
            wx.stopPullDownRefresh(); // 停止下拉
        },
        2000);
    },

})
复制代码

Note: While doing the applet development tool looks all right, get navigation bar height is also 64px But in the real machine after the test, there are deviations in the iphone8 plus height is 60px.

This map can clearly see the difference a few px, if you are alone several pages using custom navigation, careful users may notice, but does not substantially affected. If you are using a custom global navigation, it does not have this problem.

Item Code: https: //github.com/Shay0921/header-navbar.git

Reproduced in: https: //juejin.im/post/5d0219536fb9a07ef06f8eab