一：需求

把微信小程序标题栏处变成搜索栏。
自定义返回上级页面。

二：需求分析

首先要把小程序标题栏设置为可自定义。
然后计算原标题栏的高度组成结构。
根据计算高度设置搜索框和返回按钮的布局。
最后进行代码功能实现。

三：功能实现

1：设置标题栏可自定义

usingComponents是使用的相关组件

{"usingComponents": {"van-uploader": "@vant/weapp/uploader/index","van-button": "@vant/weapp/button/index","van-search": "@vant/weapp/search/index"},"navigationStyle": "custom"
}

2：计算标题栏高度

标题栏高度组成部分：最上边的状态栏高度statusBarHeight和中间按钮高度getMenuButtonBoundingClientRect和中间按钮的上下边距margin

获取状态栏高度wx.getSystemInfo.statusBarHeight
获取中间按钮高度wx.getMenuButtonBoundingClientRect()（这里一共四个值top, width, height, right具体对应可查微信开发文档）
获取中间按钮的上下边距margin = top(中间按钮上边界坐标) - statusBarHeight

 onLoad: function (options) {this.setData({menuButtonInfo: wx.getMenuButtonBoundingClientRect()})//   console.log(this.data.menuButtonInfo)const { top, width, height, right } = this.data.menuButtonInfowx.getSystemInfo({success: (res) => {const { statusBarHeight } = resconst margin = top - statusBarHeightthis.setData({navHeight: (height + statusBarHeight + (margin * 2)),searchMarginTop: statusBarHeight + margin, // 状态栏 + 胶囊按钮边距searchHeight: height,  // 与胶囊按钮同高searchWidth: right - width // 胶囊按钮右边坐标 - 胶囊按钮宽度 = 按钮左边可使用宽度})},})// 生命周期函数--监听页面加载},

四：代码实现

1:js

Page({data：{navHeight: '',menuButtonInfo: {},searchMarginTop: 0, // 搜索框上边距searchWidth: 0, // 搜索框宽度searchHeight: 0, // 搜索框高度},goBack(){wx.navigateBack({delta: 1, // 回退前 delta(默认为1) 页面})},onLoad: function (options) {this.setData({menuButtonInfo: wx.getMenuButtonBoundingClientRect()})//   console.log(this.data.menuButtonInfo)const { top, width, height, right } = this.data.menuButtonInfowx.getSystemInfo({success: (res) => {const { statusBarHeight } = resconst margin = top - statusBarHeightthis.setData({navHeight: (height + statusBarHeight + (margin * 2)),searchMarginTop: statusBarHeight + margin, // 状态栏 + 胶囊按钮边距searchHeight: height,  // 与胶囊按钮同高searchWidth: right - width // 胶囊按钮右边坐标 - 胶囊按钮宽度 = 按钮左边可使用宽度})},})// 生命周期函数--监听页面加载},
})

2:wxss

/* 自定义导航栏 */
view {box-sizing: border-box;overflow: hidden;
}
.custom-bar {/* background-color: #aaa; */position: fixed;left: 0;top: 0;width: 100%;background-color: #fafafa;z-index: 9;
}
.custom-bar__wrapper {padding: 0 10rpx;display: flex;justify-content: space-between;align-items: center;
}
.search-group {width: 88%;height: 100%;border: 1px solid #666;background-color: #fafafa;border-radius: 60rpx;
}
.van-search {font-size: 25rpx;margin: 0 -15rpx;height: 100%;
}
.goback {justify-content: flex-start;width: 40rpx;height: 40rpx;margin-left: 20rpx;
}
.search-btn {width: 100rpx;font-size: 35rpx;
}

3:wxml

<!-- 自定义导航栏 -->
<view class="custom-bar" style="height:{{navHeight}}px"><view class="custom-bar__wrapper" style="margin-top:{{searchMarginTop}}px; height: {{searchHeight}}px;width: {{searchWidth}}px" ><image src="../../../images/assetsImg/img5.png" class="goback" bindtap="goBack"></image><view class="search-group"><van-search use-action-slot="true" background="#fafafa" shape="round" field-class="van-search" focus  value="{{ inputValue }}" placeholder="请输入关键字" bind:change="changeValue"> <view class="search-btn" slot="action" bind:tap="onClick">搜索</view></van-search></view></view></view>

五：效果展示

微信小程序自定义搜索标题栏相关推荐

微信小程序自定义搜索框（searchbar）
微信小程序自定义搜索框(searchbar) 样式截图展示: 功能描述:微信小程序页面需要加入搜索框时,可以直接引用到页面中使用,当用户未输入任何关键字时如第一张图所示,当用户输入要搜索的关键字时如第 ...
微信小程序自定义搜索导航栏
自定义微信小程序导航栏因为项目需要,要实现如京东小程序类似的搜索导航栏-下图所示搜索框在导航栏中.参考了官方API最终实现了该有的效果,顺便吧此次实现的思路和代码记录下来. 一.拆解分析按照正常的 ...
微信小程序自定义搜索框并关键字高亮
效果展示: 实现原理: 一共分为两部分,搜索框.展示面板: 搜索框和展示面板根据业务需求,使用了小程序ui组 tdesign-miniprogram :当然你也可以用原生的输入框做搜索框.差别不大 ...
微信小程序自定义类似微信联系人组件
微信小程序自定义联系人弹窗在小程序项目中需要有一个选择人员项,想着看着好看一些,所以做成类似微信联系人的界面,由于本人是后端人员,效果不是特别好看,ui使用的是weui 效果图如下: 使用的是小程序 ...
微信小程序自定义组件的基本使用
微信小程序自定义组件的基本使用组件与模块类似,实现了功能的复用,提高开发速率,减少代码量在开发过程中 , 总会遇到一些功能板块是相同或很类似的 .如两个不同页面都有搜索框 , 或者导航栏等 . ...
微信小程序页面搜索框查询（无后台接口情况下）
微信小程序页面搜索框查询(无后台接口情况下) 效果图: wxml <view class="container"><view class="goodsl ...
微信小程序的搜索和重置功能
微信小程序的搜索和重置功能 wxml <template><div><div class="input-wrap"><el-inputse ...
微信小程序自定义授权弹框
微信小程序自定义授权弹框最近微信获取用户信息的接口有调整,就是这货:wx.getUserInfo(OBJECT),文档描述如下: 此接口有调整,使用该接口将不再出现授权弹窗,请使用 <butt ...
微信小程序自定义组件方案
前言:小程序已于11月初开放了小程序组件功能,但事件方面还不是很完善,有的组件暂时可能还是要用其他方式来实现,这里简单记录下开发小程序自定义组件的要点. 在小程序官方开发组件开发功能之前,自定义组件的 ...

微信小程序自定义搜索标题栏

一：需求

二：需求分析

三：功能实现

1：设置标题栏可自定义

2：计算标题栏高度

四：代码实现

1:js

2:wxss

3:wxml

五：效果展示

微信小程序自定义搜索标题栏相关推荐

最新文章

热门文章