uniapp小程序获取胶囊按钮高度自定义顶部标题栏
小程序自带的顶部不太好康,而且能改的只要颜色和文字。很多时候设计图都是需要自定义顶部的。比如放个搜索框 或者 标题 或者 可切换的 tabs 等等 。分享一下我之前的做法。
·
前言
小程序自带的顶部不太好康,而且能改的只要颜色和文字。很多时候设计图都是需要自定义顶部的。比如放个搜索框 或者 标题 或者 可切换的 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 上了。
更多推荐
所有评论(0)