微信小程序自定义搜索导航栏
自定义微信小程序导航栏
因为项目需要,要实现如京东小程序类似的搜索导航栏-下图所示搜索框在导航栏中。参考了官方API最终实现了该有的效果,顺便吧此次实现的思路和代码记录下来。
一、拆解分析
按照正常的导航栏拆解来进行计算自定义导航栏的高度。根据下图中可以得到导航栏的高度等于:手机状态栏的高度 + 胶囊按钮高度(途中标注菜单栏)+ 以及胶囊按钮的上下边距。
根据微信 API - getMenuButtonBoundingClientRect
可以得到胶囊按钮的坐标和高宽此时可以得到的信息:
再根据 getSystemInfo
获得状态栏高度— statusBarHeight
然后计算出边距为:
margin = top(胶囊按钮上边界坐标) - statusBarHeight
最终得到导航栏的高度为:
customBarHeight = height + statusBarHeight + (margin * 2)
知道这些信息剩下的就是实现了,下面是全部实现代码。
二、代码实现
json
文件设置
"navigationStyle": "custom"
JS
代码部分
//index.js
//获取应用实例
const app = getApp()Page({data: {navHeight: '',menuButtonInfo: {},searchMarginTop: 0, // 搜索框上边距searchWidth: 0, // 搜索框宽度searchHeight: 0 // 搜索框高度},onLoad: function () {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 // 胶囊按钮右边坐标 - 胶囊按钮宽度 = 按钮左边可使用宽度})},})}
})
wxml
代码
<!--index.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" ><view class="search-group"><image src="../../static/images/search.png" mode="aspectFit" /><input class="search-group__input" auto-focus placeholder="输入点什么吧"/></view></view>
</view>
wxss
代码
view {box-sizing: border-box;overflow: hidden;
}
.custom-bar {/* background-color: #aaa; */position: fixed;left: 0;top: 0;width: 100%;
}
.custom-bar__wrapper {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;border: 1px solid #666;border-radius: 60rpx;padding: 0 10rpx;
}
.search-group > input {font-size: 25rpx;
}
.search-group > image {height: 32rpx;width: 32rpx;margin-right: 20rpx
}
最终实现效果(返回按钮因为懒得找图标就没加上去 - -) ------ 代码地址
微信小程序自定义搜索导航栏相关推荐
- 微信小程序 自定义顶部导航栏标题 navigationStyle
微信小程序 自定义顶部导航栏标题 单页面自定义导航栏 修改需要自定义的页面,的页面配置.json文件 全部页面自定义导航 修改公共页面配置app.json 单页面自定义导航栏 修改需要自定义的页面,的 ...
- (转载)微信小程序自定义头部导航栏
本文转载自微信小程序自定义头部导航栏 微信小程序自定义头部导航栏 先看下demo的效果: 最终要实现的效果: 在tabbar页面不显示左侧按钮: 分享出去的页面进入后不显示左侧返回按钮: 点击返回按钮 ...
- 原声微信小程序自定义顶部导航栏 . 自定义navigationBar。 (单页面设置)
本文实例为大家分享了微信小程序自定义导航栏的具体代码,供大家参考,具体内容如下 实现自定义大致需要以下?步骤: 1.在页面.JSON文件进行相关配置,以便去掉原生 "navigationSt ...
- 微信小程序自定义tabbar导航栏,中间凸出样式
这种样式的底部导航栏 使用微信小程序的自定义tabBar:微信小程序官方说明 uni.app=>在 page.json 中的 tabBar 项指定 custom 字段为true: "t ...
- uniapp开发微信小程序自定义顶部导航栏
自定义导航栏渐变色,先上效果 使用uniapp开发小程序,在不同界面,要去对页面进行修改顶部导航栏. 比如说要去定义导航栏的背景颜色,常规的去定义导航栏背景颜色 全局定义导航栏 "windo ...
- 微信小程序自定义navigation-bar导航栏(自适应安卓苹果)
最近在写商城,中途遇到了需要自定义修改导航栏的操作,大概是如下图接过样子的,于是想手写一份,但我发现右上角的分享按钮在不同设备离顶部的距离是不一样的,于是找了下官方划水员写的文档(点这里查看),(⊙o ...
- 微信小程序 - 自定义头部导航栏组件(详解) + iphoneX以上遮挡小黑条适配问题
1. 导航栏计算: 导航栏总高度=状态栏高度+胶囊高度+(胶囊距顶距离-胶囊高度)*2 navHeight = statusBarHeight + menuButtonObject.height + ...
- 微信小程序自定义顶部导航栏navigationBar
自定义navigationBar怎么做? 去掉原生导航栏. 将需要自定义navigationBar页面的page.json的navigationBarTitleText去掉. 加上"navi ...
- 微信小程序自定义的导航栏
目录 项目场景 效果图 解决方案 具体的代码 wxml wxss 素材库 题外话 项目场景 一个小程序可以拥有用户端和审批端,但微信原生小程序规定只能有一个tabar在小程序中,但是一旦是多端口的小程 ...
最新文章
- iBatis的CRUD操作详细总结
- 非阻塞connect的实现
- php5.1 facade,php设计模式 Facade(外观模式)
- c#如何通过ftp上传文件_ftp自动上传工具,ftp自动上传工具如何自动上传文件
- 性能测试 vs 负载测试 vs 压力测试
- 空间数据索引RTree完全解析及Java实现
- 熊猫直播 使用什么sdk_没什么可花的-但是16项基本操作才能让您开始使用熊猫
- mysql分页查询报错,及解决
- 用python处理excel表格_如何用python处理excel数据 | 用python处理excel表格数据类型
- Raspberry Config.txt 介绍
- MVC过滤器详解 面向切面编程(AOP)
- 单元测试的思考与实践
- 译DevExpress v16.1更新说明(WinForms篇)
- 2022 阿里 java 面经
- 【每日函数】每日函数(2021.08.22)
- 基于微信小程序的课程学习小程序
- 转运锦鲤(Transport of Koi Carp)
- Android:AppBarLayout设置elevation为0,结果消失
- 如何用自己普通家用个人电脑做web网站服务器
- byte的范围为何是-128~127,而不是-127~128?
热门文章
- 8B / 10B Encode/Decode详解
- linux清除文件后df还是满的,Linux系统下如何用du和df命令清除大文件?
- 【DSP开发】gel文件编写
- numpy数组array的shape属性-1维、2维···
- 对于interrupt,interrupted 和 isInterrupted的一些理解
- python解决百钱百鸡问题
- wps在线预览接口_WPS文档在线预览接入的一点心得
- 关于 Facebook的 SWE_NG_GCR-SEAsia
- Tensorflow2.x: TensorFlow Addons介绍
- 如何下载GitHub网站上的代码的方法(未完,更新中。。。)