Small micro-channel program custom navigation bar component

I believe that many small partners in the development of small micro-channel program when there will be a custom top navigation bar of the requirements is not enough to show that the capsule top right corner of the applet is not customizable, oh, in addition to all other parts of the capsule according to their own projects the set, in a small program development need to be customized at the top of this recording process at their own package of this component.

Components written

Since today needs to navigation package for the component you will need the following steps:

Component architecture building

First build a structure as shown below:

Then introduced just created good components in the index:

Remember to add a reference path in the json file in Figure 1, this time you will see the Home effect is as follows:

Write assembly code base

At this point we need to see the official document that must be modified if you want to customize the default configuration file in the configuration file, in fact, here you can set up a page for page, to index the following code as an example configuration file that is in index.json You can see the following effect:

This time we can start to write the way you want, first write a simple return only one button, when began to write when you will find a big problem, how much this height? The top status bar height and how much? These two issues are seemingly stumped, this time to go look at the official api documentation you will find that you can get more current parameters of the system which will have the status bar height, as shown:

In fact, I think we only know the status bar height, the height of the status bar in addition to the rest of the height of it? Is a problem. Design documents from the official micro-channel applet can know this part of the highly seemingly as high as:

Looks like this how high can, after all, can also extend downwards, after several tests (may not be accurate) or there will be differences in the Apple Andrews good, so get yourself an adapter part of the (seemingly lifeless old phone does not support - eroded). Probably too much nonsense, directly on the bar code

structure

<view class='topbar'>
  <view class='status' style="height:{{statusHeight}}px"></view>
  <view class='navbar' style="height:{{navHeight}}px">
    <view class='navbar_back' bindtap='backClick'>
      <image src='../images/black_back.png'></image>
    </view>
    <view class='navbar_title' style="height:{{navHeight}}px">
      <view>标题</view>
    </view>
  </view>
</view>
复制代码

The main idea here is to use fixed positioning, the layout of the content will be the top in the end part of the back, so all in positioning can be very convenient, the two parts of a whole is a status bar that is part of the title and buttons.

style

.topbar {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 9999;
}
.status {
  width: 100%;
}
.navbar {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}

.navbar_back {
  padding: 0 32rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
}

.navbar_back image {
  width: 21rpx;
  height: 34rpx;
}

.navbar_title {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: -1;
}
.navbar_title view {
  width: 40%;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 38rpx;
}
复制代码

A style not too many things, the only need to say is that most modules are positioned to do, the only good that is not considered too hard to deal with the title here with a simple and crude way to set a width.

Logic processing

Component({
  properties: {
    /**
     * 自定义返回事件处理
     * customBackReturn="{{true}}" bind:customBackReturn="customBackReturn"
     */
    customBackReturn: {
      type: Boolean,
      value: false
    }
  },
  data: {

  },
  methods: {
    backClick() {
      if (this.data.customBackReturn) {
        this.triggerEvent("customBackReturn")
      } else {
        if (getCurrentPages().length == 1) {
          wx.switchTab({
            url: '/pages/index/index',
          })
        } else {
          wx.navigateBack({
            delta: 1
          })
        }
      }
    }
  },
  attached() {
    var self = this;
    wx.getSystemInfo({
      success(res) {
        var isIos = res.system.indexOf('iOS') > -1;
        self.setData({
          statusHeight: res.statusBarHeight,
          navHeight: isIos ? 44 : 48
        })
      }
    })
  }
})
复制代码

The main logic in two places is to obtain a navigation system information to determine the height, and the other is a return to the previous logic, the default is to open the home page (note use of api), if you have a custom event with a custom event customBackReturn

effect

Currently no effect on and before the general custom is almost a Back button and title text, as shown below:

Then such a simple custom navigation bar ok, but if so then why do I have a custom program that comes with a small not better, so we have to continue to improve, to add a home page button to return.

Bring back button navigation

Applet in particular by sharing out of the page, if there is no button to return to the home page, users do not know how to return to the home page of this small program, it gives users a great inconvenience, so it must have such a demand , if to achieve it? Actually very simple, after all, has come out of a need is to add a go on the line.

structure

<view class='topbar'>
  <view class='status' style="height:{{statusHeight}}px"></view>
  <view class='navbar' style="height:{{navHeight}}px">
    <view class='navbar_home'>
      <image src='../images/black_back.png' bindtap='backClick'></image>
      <image src='../images/home_black.png' bindtap='homeClick'></image>
    </view>
    <!-- <view class='navbar_back' bindtap='backClick'>
      <image src='../images/black_back.png'></image>
    </view> -->
    <view class='navbar_title' style="height:{{navHeight}}px">
      <view>标题</view>
    </view>
  </view>
</view>
复制代码

We noticed that I put before rather than modifying the code comments directly in front of the code, in fact here is to keep the back can be customized you want that form of navigation.

style

.navbar_home {
  margin-left: 32rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: 33rpx;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(0,0,0,0.2);
  box-sizing: border-box;
  padding: 10rpx 0;
}

.navbar_home image:first-child {
  width: 21rpx;
  height: 34rpx;
  padding: 0 32rpx;
  border-right: 1px solid rgba(255,255,255,0.2);
}

.navbar_home image:last-child {
  width: 37rpx;
  height: 35rpx;
  padding: 0 32rpx;
}
复制代码

The same style is also just on the basis of previous increases above these styles.

logic

 homeClick() {
      wx.switchTab({
        url: '/pages/index/index',
      })
    }
复制代码

Logic also just add a return home in the event only in methods, here we need to according to their project circumstances.

effect

Style we can according to their own projects.

The function of these two parts are done, but if we now add some content on the home page you'll see the problem as follows:

We also went to the top of the content, but I think about the contents of the top to the top of this effect it is not, so to solve this problem, the question now is not this how you want to do it? Think of this should be good to do ah, I add a contour of the block is not positioned in this section is not on it, so now it will be implemented, as follows:

<view style="height:{{statusHeight+navHeight}}px" hidden='{{false}}'></view>
<view class='topbar'>
  <view class='status' style="height:{{statusHeight}}px"></view>
  <view class='navbar' style="height:{{navHeight}}px">
    <view class='navbar_home'>
      <image src='../images/black_back.png' bindtap='backClick'></image>
      <image src='../images/home_black.png' bindtap='homeClick'></image>
    </view>
    <!-- <view class='navbar_back' bindtap='backClick'>
      <image src='../images/black_back.png'></image>
    </view> -->
    <view class='navbar_title' style="height:{{navHeight}}px">
      <view>标题</view>
    </view>
  </view>
</view>
复制代码

Results are as follows:

When we are false to true you can get the top content to the top of the results, so thus achieving two effects, since we here are encapsulated into components, then we can not just write, you need some packages, then to other pages to configure and use, so in need of rehabilitation.

Package navigation bar so that it can be customized

In order to enable more convenient to use, the need for further navigation bar above packages to suit different needs.

Structural transformation

First is the need to transform the structure, so that more options can be configured, structural transformation as follows:

<view style="height:{{statusHeight+navHeight}}px" hidden='{{header.hiddenBlock}}'></view>
<view class='topbar' style="background:{{header.headerbg}}">
  <view class='status' style="height:{{statusHeight}}px"></view>
  <view class='navbar' style="height:{{navHeight}}px">
    <block wx:if="{{header.slot}}">
      <slot></slot>
    </block>
    <block wx:else>
      <view class='navbar_home' wx:if="{{header.homeCapsule}}" style="background:{{header.capsulebg}};border:{{header.capsuleborder}}">
        <image src='../images/black_back.png' bindtap='backClick' style="border-right:{{header.capsulesep}}"></image>
        <image src='../images/home_black.png' bindtap='homeClick'></image>
      </view>
      <view class='navbar_back' bindtap='backClick' wx:else>
        <image src='../images/black_back.png'></image>
      </view>
      <view class='navbar_title' style="height:{{navHeight}}px">
        <view style="color:{{header.fontColor}};font-size:{{header.fontSize}}">{{header.title}}</view>
      </view>
    </block>
  </view>
</view>
复制代码

All of the above parameters are configurable, which greatly gave developers to customize different styles, and if you still do not meet the recommendations you directly modify the above code or himself a better package.

Transformation logic

Component({
  properties: {
    header: {
      type: Object,
      value: {
        homeCapsule: false,
        headerbg: "#fff",
        title: "",
        fontColor: "#000",
        fontSize: '16',
        hiddenBlock: false,
        capsulebg: 'rgba(0,0,0,0.2)',
        capsuleborder: '1px solid rgba(0, 0, 0, 0.1)',
        capsulesep: '1px solid rgba(255,255,255,0.2)',
        slot: false
      }
    },
    /**
     * 自定义返回事件处理
     * customBackReturn="{{true}}" bind:customBackReturn="customBackReturn"
     */
    customBackReturn: {
      type: Boolean,
      value: false
    }
  },
  methods: {
    backClick() {
      if (this.data.customBackReturn) {
        this.triggerEvent("customBackReturn")
      } else {
        if (getCurrentPages().length == 1) {
          wx.switchTab({
            url: '/pages/index/index',
          })
        } else {
          wx.navigateBack({
            delta: 1
          })
        }
      }
    },
    homeClick() {
      wx.switchTab({
        url: '/pages/index/index',
      })
    }
  },
  attached() {
    var self = this;
    wx.getSystemInfo({
      success(res) {
        var isIos = res.system.indexOf('iOS') > -1;
        self.setData({
          statusHeight: res.statusBarHeight,
          navHeight: isIos ? 44 : 48
        })
      }
    })
  }
})
复制代码

The transformation of the structure is actually able to add some value passed to customization.

This component here is basically a good package, the next step is to use this component.

With a conventional case back button

This application is very simple and straightforward way to configure some parameters.

Introduced first component as follows:

{
  "navigationStyle":"custom",
  "usingComponents": {
    "header":"../../components/navbar/navbar"
  }
}
复制代码

You need to configure a custom navigation bar, otherwise there would be no effect, according to the introduction to his path, if all pages need to use the recommended configuration directly in the app.json, so that you do not have to configure each page.

wxml component label used

<header header='{{header}}'></header>
<view>内容区域哦</view>
复制代码

The page will need to use header tags

js file configuration parameters

Page({
  data: {
    header:{
      homeCapsule: false,
      title: '标题',
      fontColor: "#000",
      fontSize: '36rpx',
      headerbg: '#f40',
      hiddenBlock: false,
      slot: false
    }
  },
  onLoad: function() {}
});
复制代码

There are three parameters that must be configured: homeCapsule, hiddenBlock, meaning slot three parameters represent is whether the show with a home button, whether to hide the entire top (will explain later), the need for custom configuration

effect

Then the most basic is realized.

Examples of content Top

Sometimes you need to top content, look more attractive, so we need to configure the hiddenBlock, look at the code:

<header header='{{header}}'></header>
<image src='../../images/timg.jpg' style="width:100%" mode="aspectFill"></image>
<view>内容区域哦</view>
复制代码

It is important how to configure, as follows:

Page({
  data: {
    header:{
      homeCapsule: false,
      title: '',
      headerbg: 'transparent',
      hiddenBlock: true,
      slot: false
    }
  },
  onLoad: function() {}
});
复制代码

Results are as follows:

Navigation with home button

Share page needs with Home button, how to configure it? With this component is very easy to configure the following configuration:

Page({
  data: {
    header:{
      homeCapsule: true,
      title: '测试标题',
      headerbg: '#f40',
      hiddenBlock: false,
      slot: false
    }
  },
  onLoad: function() {}
});
复制代码

Results are as follows:

Fully customizable

If you can not meet the above requirements, then only himself wrote, simple examples are as follows:

<header header='{{header}}'>
  <view>测试的标题哦</view>
</header>
<image src='../../images/timg.jpg' style="width:100%" mode="aspectFill"></image>
<view>内容区域哦</view>
复制代码

Configuration is as follows:

Page({
  data: {
    header:{
      headerbg: 'transparent',
      hiddenBlock: false,
      slot: true
    }
  },
  onLoad: function() {}
});
复制代码

Results are as follows:

Of course, here simply give chestnut it, we rely on themselves to concrete reality. Most of this component to this package is complete. Thank you, oh!

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