1.0自定义组件
在实现前先将其组件化，方便复用，
(底部有demo)
Component(Object object) | 微信开放文档
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文章来源：https://www.toymoban.com/news/detail-520347.html
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文章来源地址https://www.toymoban.com/news/detail-520347.html
到了这里，关于小程序实现自定义顶部导航栏搜索框的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
