1.0自定义组件

在实现前先将其组件化，方便复用，

(底部有demo)

1.1配置JS文件

// pages/components/template/template.js
Component({

    //开启插槽
    options: {
        multipleSlots: true //启用slot插槽
    },

    //接收父组件参数
    properties: {
        //参数名
        templateValue: {
            type: String,//数据类型
            value: "我是默认值噢~"//默认值
        },
    },

    //方法
    methods: {
        templateFunction() {
            console.log("我是组件的方法噢~");
        }
    },

    //组件的生命周期
    lifetimes: {
        //在组件实例刚刚被创建时执行	
        created() {
        },
        // 在组件实例进入页面节点树时执行
        attached: function () {
        },
        //	在组件在视图层布局完成后执行	
        ready() {
        },
        //在组件实例被移动到节点树另一个位置时执行	
        moved() {
        },

        // 在组件实例被从页面节点树移除时执行
        detached: function () {
        },
        //每当组件方法抛出错误时执行	
        error() {
        },
    },
})

1.2配置JSON文件

"component": true, // 自定义组件声明

"usingComponents": {} // 可选项，用于引用别的组件

"navigationStyle": "custom"// 导航栏样式

default 默认样式

custom 自定义导航栏，只保留右上角胶囊按钮

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

1.3引用组件

接下来在想使用的页面JSON文件的usingComponents里面引入后直接只用

{
  "usingComponents": {
    "search":"/pages/components/TopSearchBar/TopSearchBar"
  },
  "navigationStyle": "custom",
  "navigationBarTitleText": "搜索结果"
}

2.0搜索框实现

我们要实现四周边距相等，每台手机的状态栏高度不一致，不能直接使用px来固定位置，胶囊按钮和状态栏之间有点边距，微信有获取状态栏信息的api以及胶囊按钮信息，胶囊按钮的top - statusBarHeight（状态栏高度）就能得到边距了，胶囊按钮右边的边距 screenWidth（屏幕的宽度） - right（胶囊按钮位置）

2.1获取状态栏和胶囊按钮信息api

wx.getSystemInfo(Object object) | 微信开放文档

i获取状态栏信息

Object wx.getMenuButtonBoundingClientRect() | 微信开放文档

获取菜单按钮（右上角胶囊按钮）的布局位置信息

2.2 代码

使用了vant框架，不知道这么安装的可以看下链接

小程序如何使用vant框架？_荡悠悠y的博客-CSDN博客_支付宝小程序使用vant

JS：

// pages/components/template/template.js
Component({

  //开启插槽
  options: {
    multipleSlots: true //启用slot插槽
  },

  //接收父组件参数
  properties: {
    //接受格式
    te: {
      type: String,//数据类型
      value: ""//默认值
    },
  },
  data: {
    statusBarHeight: '',//状态栏高度
    navHeight: '',//胶囊按钮高度
    searchMarginTop: '', //  胶囊按钮顶部边距
    searchMarinRight: '',// 胶囊按钮右边边距
  },

  //方法
  methods: {

    //获取状态栏的参数
    getCalculate() {
      const {
        top,
        width,
        height,
        right,
        left
      } = wx.getMenuButtonBoundingClientRect()
      //获取系统信息
      wx.getSystemInfo({
        success: (res) => {
          const {
            statusBarHeight,//状态栏高度
            screenWidth,//屏幕宽度
          } = res
          // console.log({ top, width, height, right, left });
          // console.log({ statusBarHeight });
          this.setData({
            statusBarHeight,//状态栏高度
            searchMarginTop: top - statusBarHeight,//胶囊按钮top - 状态栏高度 得出顶部的边距
            searchMarinRight: screenWidth - right,//屏幕宽度 - 胶囊按钮right  得出右边的边距
            capsuleWidth:width,//胶囊按钮宽度
            navHeight:height
          })
        },
      })
    },
  },

  //组件的生命周期
  lifetimes: {
    //在组件实例刚刚被创建时执行	
    created() {
    },
    // 在组件实例进入页面节点树时执行
    attached: function () {
      this.getCalculate()
    },
    //	在组件在视图层布局完成后执行	
    ready() {
    },
    //在组件实例被移动到节点树另一个位置时执行	
    moved() {
    },

    // 在组件实例被从页面节点树移除时执行
    detached: function () {
    },
    //每当组件方法抛出错误时执行	
    error() {
    },
  },
})

html:

<!--pages/components/template/template.wxml-->
<view class="box" style="padding-top: {{statusBarHeight}}px;">
  <view style="padding: {{searchMarginTop + 'px' + ' ' + (searchMarinRight + capsuleWidth + 5) + 'px' + ' ' + searchMarginTop + 'px' + ' '  +  searchMarinRight  + 'px'}};background-color: rebeccapurple;">
    <van-search value="{{ value }}" custom-class="search-custom" shape="round" background="rgb(0,0,0,0)" placeholder="请输入搜索关键词" />
  </view>
</view>

css:

/* pages/components/TopSearchBar/TopSearchBar.wxss */
.box{
}
/* 取消vant搜索框自带的边距 */
.search-custom{
  padding: 0 !important;
}

2.3 demo

https://gitee.com/zhang_yuqi/top-search

本文含有隐藏内容，请开通VIP 后查看

小程序实现自定义顶部导航栏搜索框