uniapp小程序获取胶囊按钮高度自定义顶部标题栏
2023-04-18 14:28:59 时间
前言
小程序自带的顶部不太好康,而且能改的只要颜色和文字。很多时候设计图都是需要自定义顶部的。比如放个搜索框 或者 标题 或者 可切换的 tabs 等等 。分享一下我之前的做法。
一、获取胶囊的位置信息 API
wx.getMenuButtonBoundingClientRect()
基础库 2.1.0 开始支持,低版本需做兼容处理。
小程序插件:支持,需要小程序基础库版本不低于 2.15.0
微信 Windows 版:支持
微信 Mac 版:支持
获取菜单按钮(右上角胶囊按钮)的布局位置信息。坐标信息以屏幕左上角为原点。
1.返回值
Object
返回菜单按钮的布局位置信息
属性 | 类型 | 说明 |
---|---|---|
width | number | 宽度,单位:px |
height | number | 高度,单位:px |
top | number | 上边界坐标,单位:px |
right | number | 右边界坐标,单位:px |
bottom | number | 下边界坐标,单位:px |
left | number | 左边界坐标,单位:px |
二、演示
标题型
1.关闭原生的顶部栏
/pages.json
"pages": [{
"path": "pages/index/index",
"style": {
"navigationStyle": "custom",
"app-plus": {
"titleView": false
}
}
},
...
}]
2.页面加载时获取胶囊高度并设置标题高度
index.vue
<template>
<view class="bg">
<view class="title" :style="'padding-top:' + titleHeight + 'px'">新华的湖</view>
</view>
</template>
<script>
export default {
data() {
return {
titleHeight: 0
},
onLoad() {
// #ifdef MP-WEIXIN
this.getHeight();
// #endif
},
methods: {
// 获取微信右上角胶囊高度
getHeight() {
let res = wx.getMenuButtonBoundingClientRect();
this.titleHeight = res.top;
}
}
};
</script>
<style lang="scss" scoped>
.title {
font-weight: 600;
line-height: 30px;
margin-left: 40rpx;
font-size: 17px;
}
</style>
三、举例
不想翻以前的代码,拿图说明一下,做法与上面相似滴。聪明的你肯定轻松做出来啦~
1.tabs
uview有现成可以用的tabs 标签,可以根据当前索引来实现切换效果
下面是我去年用 js 写的效果,点击规则后会下拉到规则那里,点击公告回到最顶部 (第一张图没截好,下划线是在公告那的)
打开主页 | 切换到规则 |
---|---|
![]() | ![]() |
2.设置背景图
去掉顶部栏后,可以把图片设置到全屏,十分美观,在app里面可以很实用。小程序的话,如果有背景图上有文字,尽量考虑与胶囊按钮对齐,这样看起来正常点
打开主页 | 切换到规则 |
---|---|
![]() | ![]() |
结语
可以关注一下我滴个人博客网站哟 www.dddhl.cn
源码已经分享到 gitee 上了。
相关文章
- GSMA:到2025年,全球5G连接数将接近20亿
- 告别手摇织布机的AI时代
- 为什么从第一天起就应该在 Kubernetes 上构建应用
- IP地址被封原因解析及IP代理对IP限制的帮助
- 人工智能颠覆商业格局的26个例子
- 边缘计算和云计算的区别是什么?与终端设备的关系是什么?
- 2021阿里巴巴诸神之战全球征集令,1700万数字订单寻找未来独角兽
- 通过网络本地化解决永久漫游风险
- 中国电信骨干建成5大区域ROADM网,实现一二干融合
- 2021年过半,中国广电5G开始加速
- gRPC入门指南之 双向流式RPC
- 通用人工智能、人工智能感知和大型语言模型
- 金山云Q2营收21.7亿元创单季新高 双引擎驱动业绩强势增长
- 工业机器人来焊接,优势在哪里?
- 韩国法院裁定网络运营商可向Netflix等流量大户征收宽带使用费
- 曼城推出可检测情绪的智能围巾,把球迷给整迷惑了
- 流行SaaS用户管理工具大比拼
- 掌握IPv6时代网络主权 一场输不起的战争
- 大数据之分布式协调神器:Zookeeper选举
- GSA 报告:全球 5G 商用网络已达 169 个,各大洲均已覆盖