微信小程序云开发之自定义顶部导航栏搜索框（非组件）-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序云开发之自定义顶部导航栏搜索框（非组件）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

提到微信小程序，就不得不提到它那磨人的顶部导航栏，真的有被丑到。身为强迫症患者，笔者实在是难以忍受，好在官方提供了解决方案，但是对于初学者还是有一丢丢的难度，为了初学者不在重蹈笔者的老路，这篇文章就给大家分享一下如何做一个好看的自定义顶部导航栏。

注意：本篇文章分享的是如何做一个好看的自定义导航栏，不是做组件哦！

正文

一、隐藏原生navigationBar

navigation-bar是小程序的顶部导航组件，当页面配置navigationStyle设置为custom的时候可以使用此组件替代原生导航栏。

1.全局自定义顶部导航栏

在app.json的“window”里添加"navigationStyle": "custom"

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

2.单独页面自定义顶部导航栏

在该页面的json文件里添加"navigationStyle": "custom"

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

二、获取系统及按钮信息

1.js页面

获取系统信息并计算按钮位置信息

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页面

通过获取的数据编写搜索框

<!--搜索-->
<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页面

美化搜索框

.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页面

这是最容易忘的页面，一定要记得编写

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;
      }
    })
  },
})