微信小程序右上角胶囊按钮尺寸

最新推荐文章于 2024-04-17 09:11:02 发布
最新推荐文章于 2024-04-17 09:11:02 发布
阅读量1w 收藏 16
点赞数 8
分类专栏： 微信小程序 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/NaHCO4/article/details/105850509
版权

微信小程序胶囊按钮尺寸

在自定义时导航栏时，往往我们为了设计的美观性，需要要求我们自己设计的导航组件在某些尺寸上能与右上角那个可爱的胶囊按钮保持一致，以下是胶囊按钮的尺寸：
在这里插入图片描述

NaHCO33333
关注
  • 8
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
微信小程序:修改按钮BUTTON尺寸
m0_60643169的博客
11-15 1万+
1.微信小程序BUTTON常见属性: 2.BUTTON宽高等样式的有效调整方法： 微信小程序当中通过wxss来设置button的宽高值并不起效果，而size属性却只有两个合法值，当我们想要自定义大小时则： 在 标签中直接写 style即可： <button style="width: 90vw;height: 8vh;background-color: aqua;"> 在线客服222 </button> 3.button按钮open-type属性： ..
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
10-16
对于一些电商平台来说，当商品被转发后会很影响客户查看其它产品和首页，这时候就需要使用自定义导航栏自己写一个“胶囊按钮”...这篇文章主要介绍了详见微信小程序胶囊按钮返回|首页自定义导航栏,需要的朋友可以参考下
【实战】前端必会 —— 微信小程序右上角胶囊按钮（标题设置透明后的处理）
程序边界
09-16 5481
wx.getMenuButtonBoundingClientRect() wx.getSystemInfoSync()
小程序获取胶囊区大小
m573556796的博客
08-10 248
小程序获取胶囊区大小。
微信小程序自定义导航栏胶囊菜单按钮高度适配问题
最新发布
ayuday的博客
04-17 579
而胶囊信息可以通过 wx.getMenuButtonBoundingClientRect() 获取，现在就只用解决高度差了。观察发现，胶囊顶部高度距导航栏顶部高度的高度差 和 胶囊底部高度距导航栏底部高度的高度差，是一样的。这是在没有设置自定义时的原生导航栏，我们发现整体的高度就是 （状态栏高度 + 导航栏高度）而状态栏高度可以通过 wx.getSystemInfo(）获取，现在就只用解决导航栏高度了。也就是说 导航栏高度 = 胶囊高度 +（高度差）x 2。组件使用页面.json。
在uniapp中，微信小程序获取胶囊的高度、宽度，且适配微信小程序、App
Lulu_yo的博客
10-07 3323
【代码】在uniapp中，微信小程序获取胶囊的高度、宽度，且适配微信小程序、App。
微信小程序获取右上角胶囊距顶部的距离和胶囊的尺寸
Cheryl的加工厂
04-13 3180
<view class="search-container p-a pl-20" :style="{ top: statusHeight + 'px', height: navHeight + 'px' }" > </view> const res = wx.getMenuButtonBoundingClientRect() const statusHeight = res.top //胶囊距离顶部 const navHeight = res.height //胶囊高度 t
微信小程序学习笔记-右上角胶囊按钮适配
木玄客的博客
03-11 3152
正常标题栏未设置自定义的时候，胶囊按钮（小程序顶部右边的两个）下面才是我们自己的页面部分： 但是设置了标题栏自定义以后，整个页面都被我们的页面填充： 这时候如果有在顶部配置图标或者标题，那么就要考虑一个问题：安卓跟ios不同机型下胶囊按钮的大小跟位置是不一样的，这时候就需要获取胶囊按钮的信息进行动态配置： onLoad(){ let 胶囊信息= wx.getMenuButtonBoundingClientRect() this.setData({ 胶囊信息声明: 胶囊信息}) } 获取
自定义导航栏计算小程序状态栏高度，导航栏高度
weixin_59803648的博客
07-24 743
自定义导航栏计算小程序状态栏高度，导航栏高度
[微信小程序开发]如何去掉或隐藏小程序顶部栏navigationBar
03-29
小程序全局配置app.josn增加选项："navigationStyle": "custom", 具体如下： 原生小程序开发 打开 app.json：   { "pages": [ "pages/index/index", "pages/logs/index" ], "window": { "backgroundTextStyle": ...
header-navbar-小程序自定义导航栏，左上角胶囊按钮返回|首页详解.zip
09-23
小程序自定义导航栏，左上角胶囊按钮返回|首页详解详情介绍地址：https://juejin.im/post/5d0219536fb9a07ef06f8eab主要API获取设备信息wx.getSystemInfo获得胶囊按钮坐标信息wx.getMenuButtonBoundingClientRect项目截图
微信小程序封装分享与分销功能过程解析
01-03
在微信小程序中，可以很简单的分享一个页面，比微信H5简单多了，然而，分享出去的页面（也叫卡片），打开后只是一个单独的页面，没有底部导航栏，点击返回按钮的时候就直接退出小程序了。如果需要去到首页，还必须...
uni开发微信小程序解决全局分享分销问题
01-03
uni开发微信小程序解决全局分享分销问题 1. 需求 1.小程序内每个页面都要打开胶囊分享按钮并实现分销 2.分享功能应该是在用户登录之后才予以打开 3.不想做在每个页面都写分享钩子的傻逼操作 2.实现 1.技术点： vueX ...
记录--优雅解决uniapp微信小程序右上角胶囊菜单覆盖问题
林恒的博客
12-08 1187
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 前言 大家好，今天聊一下在做uniapp多端适配项目，需要用到自定义导航时，如何解决状态栏塌陷及导航栏安全区域多端适配问题，下文只针对H5、APP、微信小程序三端进行适配，通过封装一个通用高阶组件包裹自定义导航栏内容，主要是通过设置padding来使内容始终保持在安全区域，达到低耦合，可复用性强的效果。 一、创建NavbarWr...
微信小程序顶部标题栏仅保留右上角胶囊状按钮
qq_33002885的博客
10-17 5754
navigationStyle, (导航栏样式，仅支持 default/custom。custom 模式可自定义导航栏，只保留右上角胶囊状的按钮),如果在app.json里面的window增加navigationStyle:custom ,顶部导航栏就会消失,保留右上角胶囊状的按钮...
Android自定义胶囊按钮,小程序自定义导航栏设置
weixin_42350755的博客
05-26 340
为了摆脱小程序单一的顶部导航栏样式，添加更为炫酷的导航栏设置导航栏宽高 (bug更新，ios真机上出现部分手机获取不到胶囊按钮信息的问题)//建议全局设置,在app.js 生命周期函数onLaunch获取//接下来，先获取系统信息wx.getSystemInfo({success: e => {// console.log(e);const systemInfo = e;/*** 胶囊按钮信...
微信小程序自动获取顶部导航栏高度
sxy323的博客
12-08 3798
微信小程序自定义导航栏高度
微信小程序单独设置右上角胶囊颜色
热门推荐
samHuangLiang的博客
08-16 1万+
1.微信小程序全局颜色一般在app.json中设置: "pages": [ "pages/index/index", "pages/logs/logs", "pages/login/index", "pages/coupn/index", "pages/success/index", "pages/wxOffList/index", "...
微信小程序右上角胶囊
09-05
微信小程序右上角的胶囊按钮是微信小程序的一个特殊按钮，通常用于展示页面标题和一些常用操作按钮。在正常情况下，胶囊按钮的存在不会对页面的导航栏标题产生影响，该标题会显示在胶囊按钮的左侧。 如果你想了解更多关于微信小程序右上角胶囊按钮的具体样式，如边框大小、颜色、背景色等，你可以参考微信开放社区的相关讨论。 此外，如果你需要自定义小程序的底部导航栏（也称为tabbar），你可以使用微信小程序提供的自定义tabbar功能。你可以通过编写相应的代码实现自定义tabbar，从而使小程序的底部导航栏与你的设计需求相匹配。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [【实战】前端必会 —— 微信小程序右上角胶囊按钮（标题设置透明后的处理）](https://blog.csdn.net/qq_32682301/article/details/126836007)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [微信小程序 自定义tabbar (源码)](https://download.csdn.net/download/Sapphire521/85511088)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值