Custom top navigation bar search box (non-component) for WeChat applet cloud development

foreword

When it comes to WeChat applets, you have to mention its annoying top navigation bar, which is really ugly. As a patient with obsessive-compulsive disorder, the author is really unbearable. Fortunately, the official solution is provided, but it is still difficult for beginners. In order for beginners not to repeat the author's old path, this article will share with you how to Make a nice looking custom top navigation bar.

Note: This article shares how to make a beautiful custom navigation bar, not a component!

text

1. Hide the native navigationBar

navigation-bar is the top navigation component of the applet. When the page configuration navigationStyleis set to , customthis component can be used to replace the native navigation bar.

1. Globally customize the top navigation bar

Add "navigationStyle": "custom" to "window" in app.json

"window": {
	"navigationStyle": "custom"
}

2. Customize the top navigation bar on a separate page

Add "navigationStyle": "custom" to the json file of the page

{
  "usingComponents":{},
  "navigationStyle": "custom"
}

2. Obtain system and button information

1. js page

Get system information and calculate button position information

const app=getApp()
Page({
  data: {
    page_show:false,
    navHeight: '',
    menuButtonInfo: {},
    searchMarginTop: 0, // 搜索框上边距
    searchWidth: 0, // 搜索框宽度
    searchHeight: 0 ,// 搜索框高度
  },


  onLoad: function (options) {
    var systeminfo=wx.getSystemInfoSync()
    //console.log(systeminfo.windowHeight)
    this.setData({
      movehight:systeminfo.windowHeight,
      movehight2:systeminfo.windowHeight-100
    })

    this.setData({
      menuButtonInfo: wx.getMenuButtonBoundingClientRect()
    })
    console.log(this.data.menuButtonInfo)
    const { top, width, height, right } = this.data.menuButtonInfo
    wx.getSystemInfo({
      success: (res) => {
        const { statusBarHeight } = res
        const margin = top - statusBarHeight
        this.setData({
          navHeight: (height + statusBarHeight + (margin * 2)),
          searchMarginTop: statusBarHeight + margin, // 状态栏 + 胶囊按钮边距
          searchHeight: height,  // 与胶囊按钮同高
          searchWidth: right - width -20// 胶囊按钮右边坐标 - 胶囊按钮宽度 = 按钮左边可使用宽度
        })
      }
    })

  }, 
})

2.wxml page

Write a search box with the data obtained

<!--搜索-->
<view  style="height:{
   
   {navHeight}}px;background:#ffffff;position: sticky;top: 0px;z-index:99999; " >
  <view class="custom-bar__wrapper" style="margin-top:{
   
   {searchMarginTop}}px; height: {
   
   {searchHeight}}px;width: {
   
   {searchWidth}}px;position:absolute;" >
    <view class="search-group" style="position:absolute;">
      <image    style="left: 7rpx;" src="/images/icon/sousuo.png" mode="aspectFit" />
      <input  class="search-group__input" type="text" placeholder="搜搜校园日常动态吧！" placeholder-style="color:#161823;" confirm-type="search" value="{
   
   {search}}" maxlength="25" bindconfirm="search"></input>
    </view>
  </view>
</view>

3. css page

Beautify the search box

.custom-bar__wrapper {
  left: 24rpx;
  padding: 0 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.search-group {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background:#F0F8FF ;
  border-radius: 100rpx;
  padding: 0 15rpx;
}
.search-group > input {
  font-size: 25rpx;
  left: 14px;
}
.search-group > image {
  height: 36rpx;
  width: 36rpx;
  margin-right: 20rpx
}

4. app.js page

This is the most forgettable page, you must remember to write

App({
  onLaunch: function () {
    wx.getSystemInfo({
      success: e => {
        this.globalData.StatusBar = e.statusBarHeight;
        let custom = wx.getMenuButtonBoundingClientRect();
        this.globalData.Custom = custom;  
        this.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
      }
    })
  },
})

3. Check the effect

 Summary ideas

• Hide native top navigation bar
• Obtain data related to the capsule button and status bar for subsequent calculations
• Calculate the height of the navigation bar of the model according to different models, and adapt it
• Write a new navbar page
• Apply the obtained button parameters
• css beautification interface

Flying Fish Programmer

If this article is helpful to you, please give a free like

Or follow the WeChat public account [Flying Fish Programmer] for more information.