uniapp、小程序calc属性内联写法

最新推荐文章于 2023-11-13 11:47:18 发布
原创 最新推荐文章于 2023-11-13 11:47:18 发布 · 1.8k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

博客主要围绕Uniapp和小程序展开，聚焦于calc属性的联写方法，在信息技术领域中，这对于前端页面布局和样式设置有一定帮助，能让开发者更灵活地处理元素尺寸等问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在这里插入图片描述

:style="{top:'calc(50% -'+ height+'rpx)'}"
使用UniApp构建简易计算器
emmp40的博客
06-20 1367
通过Vue.js的模板语法和UniApp提供的丰富功能，我们可以快速开发出一个具有基本计算功能的应用程序。如果你对跨平台应用开发感兴趣，或者想要寻找一个强大且易用的工具来实现你的创意，那么不妨尝试一下UniApp。按钮部分使用嵌套的`<view>`和`<button>`元素来创建一系列按钮，而按钮的文本和样式则通过Vue绑定实现。第三步：处理计算逻辑 我们需要在页面的script标签中添加逻辑代码，来处理按钮的点击事件和计算逻辑。在这段代码中，我们使用了Vue.js的模板语法来定义计算器页面的结构。
uniapp新手必须的知道的坑
zsq199771的博客
06-10 1万+
有学过微信小程序开发和vue的，uniapp开发成本低，但是还是不能忽视了注意事项，别给自己带来麻烦，以下是我从官网上抽取的，希望接下来的开发能够顺利进行，文字有点多，但细看益处多多，go~~~ 开发工具下载标准版，在运行或发行uni-app时，会提示安装uni-app插件 下载App开发版，可开箱即用 如使用cli方式创建项目，可直接下载标准版，因为uni-app编译插件被安装到项目下了。 可以通过 vue-cli 创建 uni-app 项目。 接口能力（JS API）靠近微信小程序规范，但需将前缀 wx
uniapp微信小程序scroll-view动态style样式高度和宽度中的calc属性
FUFCY的博客
03-24 2483
<scroll-view class="gd_z" scroll-y="true" style="height: calc(100vh - {{statusBarHeight*2.3 +70}}rpx);"></scroll-view> //statusBarHeight是变量要用{{}}这个就可以了
uni-app中使用calc，控制台显示属性值无效？
SM_Cute的博客
04-24 1487
uni-app中使用calc，控制台显示属性值无效？
uniapp局部滚动，动态style带有calc计算
RainHg的博客
04-26 1101
uniapp实现局部/区域滚动，使用createSelectorQuery获取节点信息，动态style带有calc计算
【uniapp】CSS3 的 calc() 函数使用表达式动态计算
sayyy的专栏
08-05 5317
前言 css3 中增加了 calc() 函数 calc() 函数语法：property: calc(expression) expression 表达式为： “+”、 “-”、"*"、"/" 表达式 “+”、 “-“符号前后必须为空格，比如：calc(50% - 8px)。”*”、"/"符合无此要求。 expression 表达式中允许嵌套函数（var 函数可以获取css变量），例如：.foo { --widthA: 100px; --widthB: calc(var(--widthA) / 2)
内联css使用calc()写法 + 固定自定义导航栏
m0_68630350的博客
10-07 454
内联css使用calc()写法 + 固定自定义导航栏
uniapp中使用calc计算的坑
QQMESSI
05-14 3154
错误写法： height: calc(100vh-100rpx) 正确写法 height: calc(100vh - 100rpx) 睁大眼睛找不同，有没有发现在calc中“100vh”和“100rpx”与中间“-”加了个空格，对，就是这么坑，我之前以为uniapp不支持calc计算不同单位呢，后来才发现这个坑。 ...
uniapp 将css中calc得到的值取反示例
weixin_46337813的博客
11-06 959
<swiper class="swiper" :class="dotStyle ? 'square-dot' : 'round-dot'" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000" duration="10" indicator-active-color="#fff" :style=" 'margin-top: calc(-1 * (430rpx .
uniapp高度计算
zzh990822的博客
12-16 1869
var(--status-bar-height) //获取状态栏的高度 height: calc(100% - 200rpx - var(--status-bar-height));//通过calc计算属性 获取想要的高度
uniapp中动态设置clac
weixin_44953689的博客
03-03 612
:style="{ maxHeight: 'calc(100vh - ' +headerTop + 'px - 49px)'}"
使用uni-app零起点开发微信小程序
chenzimin_blog
10-19 2483
目录简介一、条件准备二、开发学习四部曲三、开发规范四、项目目录结构五、资源路径说明六、生命周期七、路由、路由跳转、页面栈八、运行环境判断九、页面样式与布局9.1、尺寸单位9.2、样式导入一、HTML标签篇1.1、picker选择器1.2、picker-view滚动选择器1.3、textarea输入框二、CSS篇2.1、Flex布局2.2、尺寸单位2.3、css：两个view的重叠设置2.4、xx::after三、JS篇3.1、Date 时间转换 简介 作为一个iOS开发程序猿，突然被安排到去开发微信小程序的
uniapp实现简易计算器
weixin_47586598的博客
03-20 1884
uniapp实现简易计算器
记录下uniapp的坑之 -- calc()计算无效
junjiahuang的博客
09-01 3331
错误写法： ... computed:{ height() { return 'calc(100vh-100px)' } } ... 正确写法：减号要加空格！ ... computed:{ height() { return 'calc(100vh - 100px)' } } ...
JS中如何正确的使用有变量的calc()？
热门推荐
CruellyJohn的博客
03-19 2万+
在说JS中的calc()方法前，我们先说说使用calc()的一定要注意（无论在js中还是css中）。 　　①使用calc()动态运算时,要注意加减运算时，符号前后要加空格。乘除运算则不需要。例如： 　　　　　　　width:calc(100% - 200px); 　　　　　　　width:calc(50%*200px); 　　在写js中，我们可能会碰到需要某个...
uniapp填过的坑
一人一城温一壶酒的博客
10-18 383
最近公司一个项目要求使用uniapp写小程序，写的过程中遇到的一些坑点记录一下，方便之后查阅 动态绑定style :style="[{ height: 'calc(100vh - ' + statusBarHeight + 'rpx - 188rpx - env(safe-area-inset-bottom))'}, {top:'calc(' + statusBarHeight + 'rpx + 88rpx)' }]" tip: 这里的 ‘-’ 两边必须加空格 待新增………… ...
uniapp calc失效
qq_32545583的博客
03-20 4777
有效height: calc(100% - 50px); 无效height: calc(100% -50px); calc(100%- 50px); 减号两边要有空格
微信小程序3-2 计算器
qq_67308033的博客
11-13 2354
创建项目微信小程序项目 -计算器单击【确定】按钮按照惯例做一些初始化工作选择器查看预览效果。
uniapp项目遇到的问题和知识点
weixin_44767973的博客
04-21 1321
uniapp项目遇到的问题和知识点1、代理1.1、 正向代理：1.2、反向代理：2、Vuex2.1、作用2.2、核心概念3、css样式3.1、white-space（pre-wrap）3.2、vertical-align（top）3.3、两行文本益处省略号显示3.4、calc()3.5、flex布局justify-content所遇到的问题 1、代理 分类： 正向代理。 反向代理。 1.1、 正向代理： 开发环境中。 脚手架服务器实现代理。 webpack devServer。 浏览器发请求先请求正向
uniapp 小程序高度适配
最新发布
07-19
<think>首先，用户的问题是关于在uniapp开发小程序时的高度适配问题。他们想知道如何解决页面高度适配的解决方案。 回顾提供的引用内容，这些都是关于uniapp中高度适配的解决方案。引用[1]讨论了如何获取系统信息，如状态栏高度、窗口高度和屏幕高度，并计算可用高度。引用[2]展示了在模板中动态设置高度的方法。引用[3]提到顶部导航栏的高度适配。引用[4]讨论了scroll-view的高度适配。引用[5]详细说明了自定义导航栏的高度适配步骤。 根据这些引用，我可以整合出一个完整的解决方案。 关键点： - 使用`uni.getSystemInfoSync()`获取系统信息，包括`statusBarHeight`（状态栏高度）、`windowHeight`（窗口高度）、`screenHeight`（屏幕高度）。 - 在自定义导航栏时，需要考虑状态栏高度和导航栏高度。 - 对于内容区域的高度，可以计算为`windowHeight - statusBarHeight - customNavBarHeight`（自定义导航栏高度）。 - 在小程序中，还应考虑底部安全区域，使用`env(safe-area-inset-bottom)`。 步骤： 1. **获取系统信息**：在页面加载时，使用`uni.getSystemInfoSync()`获取必要的系统信息。 2. **计算自定义导航栏高度**：如果使用自定义导航栏，需要计算导航栏的高度。这包括状态栏高度和导航栏本身的高度。引用[5]提供了如何获取胶囊按钮的数据来计算高度。 3. **设置内容区域高度**：对于内容区域，如scroll-view，可以使用动态计算的高度。例如，`height = windowHeight - statusBarHeight - customNavBarHeight`。 4. **考虑安全区域**：在小程序中，底部可能有安全区域，使用`env(safe-area-inset-bottom)`来适配。 示例代码： - 在页面或组件的script部分获取系统信息。 - 在模板中使用动态样式设置高度。 回答结构： 1. **引言**：简要介绍问题。 2. **关键概念**：解释状态栏高度、窗口高度等。 3. **解决方案步骤**： a. 获取系统信息。 b. 计算自定义导航栏高度（如果需要）。 c. 设置内容区域高度。 4. **代码示例**：提供完整的示例代码。 5. **注意事项**：提到安全区域和不同设备的适配。 6. **相关问题**：生成相关问题。 确保使用中文回答，结构清晰。 生成相关问题： 基于主题，相关问题可能包括： 1. 如何在uniapp中获取设备信息？ 2. 自定义导航栏的最佳实践是什么？ 3. 如何处理不同屏幕尺寸的适配？ 4. scroll-view高度适配的常见问题有哪些？ 5. 如何优化uniapp小程序的性能？ 现在，构建回答。</think>### Uniapp 小程序页面高度适配解决方案 在Uniapp开发小程序时，页面高度适配的核心是**动态计算可用高度**，以兼容不同设备的屏幕尺寸、状态栏、导航栏和安全区域。以下是基于引用内容的完整解决方案，分步说明： --- ### 一、关键概念说明 - **状态栏高度（`statusBarHeight`）**：系统状态栏（如电池、时间显示区域）的高度。 - **窗口高度（`windowHeight`）**：小程序内容区域的可视高度（包含状态栏）。 - **屏幕高度（`screenHeight`）**：设备物理屏幕的总高度（可能包含虚拟导航条）。 - **自定义导航栏高度**：开发者自定义的顶部导航栏高度（需手动计算）。 - **安全区域（`safe-area-inset-bottom`）**：设备底部安全区域（如iPhone的Home条），需避免内容被遮挡。 引用[1]指出：`windowHeight` 包含状态栏高度，直接用于页面布局可能不友好；建议计算 `windowHeight - statusBarHeight - 自定义导航栏高度` 作为实际可用高度[^1]。 --- ### 二、解决方案步骤 #### 步骤 1：获取系统信息 在页面或组件的 `onLoad` 生命周期中，使用 `uni.getSystemInfoSync()` 获取设备信息： ```javascript onLoad() { const systemInfo = uni.getSystemInfoSync(); this.statusBarHeight = systemInfo.statusBarHeight; // 状态栏高度 this.windowHeight = systemInfo.windowHeight; // 窗口高度 this.screenHeight = systemInfo.screenHeight; // 屏幕高度 } ``` #### 步骤 2：计算自定义导航栏高度（如需要） 若使用自定义导航栏（通过 `"navigationStyle": "custom"` 启用），需计算总高度： ```javascript // 引用[5]方法：获取胶囊按钮位置，计算导航栏高度 const menuButtonInfo = wx.getMenuButtonBoundingClientRect(); // 仅小程序可用 this.customNavBarHeight = menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2; ``` - **说明**：胶囊按钮是小程序原生的菜单按钮，其位置信息用于精确计算导航栏高度[^5]。 #### 步骤 3：计算内容区域可用高度 - **基础公式**： $$ \text{可用高度} = \text{windowHeight} - \text{statusBarHeight} - \text{customNavBarHeight} $$ - **添加安全区域适配**（推荐）： $$ \text{最终高度} = \text{可用高度} - \text{env(safe-area-inset-bottom)} $$ 示例代码： ```javascript this.contentHeight = this.windowHeight - this.statusBarHeight - this.customNavBarHeight; // 在小程序中添加底部安全区域适配 this.safeAreaHeight = `calc(${this.contentHeight}px - env(safe-area-inset-bottom))`; ``` #### 步骤 4：在模板中动态应用高度 在 `template` 中，使用计算的高度设置滚动区域或容器： ```vue <template> <!-- 状态栏占位 --> <view :style="{ height: `${statusBarHeight}px` }"></view> <!-- 自定义导航栏 --> <view :style="{ height: `${customNavBarHeight}px`, lineHeight: `${customNavBarHeight}px` }"> 导航栏标题 </view> <!-- 内容区域（带滚动） --> <scroll-view scroll-y="true" :style="{ height: safeAreaHeight }" > <!-- 页面内容 --> <view v-for="i in 100">{{i}}</view> </scroll-view> </template> ``` - **注意**：`scroll-view` 必须明确设置高度，否则无法滚动[^4]。 --- ### 三、完整示例代码 ```vue <script> export default { data() { return { statusBarHeight: 0, windowHeight: 0, customNavBarHeight: 38 // 默认值 }; }, computed: { // 计算安全区域适配后的高度 safeAreaHeight() { const baseHeight = this.windowHeight - this.statusBarHeight - this.customNavBarHeight; return `calc(${baseHeight}px - env(safe-area-inset-bottom))`; } }, onLoad() { const systemInfo = uni.getSystemInfoSync(); this.statusBarHeight = systemInfo.statusBarHeight; this.windowHeight = systemInfo.windowHeight; // 计算自定义导航栏高度 if (typeof wx !== 'undefined' && wx.getMenuButtonBoundingClientRect) { const menuButton = wx.getMenuButtonBoundingClientRect(); this.customNavBarHeight = menuButton.height + (menuButton.top - this.statusBarHeight) * 2; } } }; </script> <template> <view> <!-- 状态栏占位 --> <view :style="{ height: `${statusBarHeight}px` }"></view> <!-- 自定义导航栏 --> <view :style="{ height: `${customNavBarHeight}px`, lineHeight: `${customNavBarHeight}px`, textAlign: 'center', backgroundColor: '#FED000' }"> 页面标题 </view> <!-- 内容区域 --> <scroll-view scroll-y :style="{ height: safeAreaHeight }"> <view v-for="i in 50" :key="i">内容项 {{i}}</view> </scroll-view> </view> </template> ``` --- ### 四、注意事项 1. **兼容性**： - `wx.getMenuButtonBoundingClientRect()` 仅在小程序环境有效，H5 需用 CSS 媒体查询替代。 - 安全区域 `env(safe-area-inset-bottom)` 在 iOS 设备上生效，Android 可能返回 0[^4]。 2. **性能优化**： - 系统信息获取应放在 `onLoad` 中，避免重复调用。 - 高度计算使用 `computed` 属性，确保响应式更新。 3. **调试工具**： - 在微信开发者工具中，使用「模拟器」切换不同设备型号，验证高度适配。 --- ### 相关问题 1. 如何在 Uniapp 中获取设备状态栏高度？ 2. 自定义导航栏时，如何适配不同手机的胶囊按钮位置？ 3. 在小程序中，如何避免内容被底部安全区域遮挡？ 4. Uniapp 的 `scroll-view` 高度不生效有哪些常见原因？ 5. 如何为 H5 和 小程序 统一实现高度适配？ [^1]: 引用自 Uniapp 系统信息获取方法。 [^2]: 引用自动态高度设置示例。 [^3]: 引用自自定义导航栏配置说明。 [^4]: 引用自 `scroll-view` 高度适配技巧。 [^5]: 引用自自定义导航栏高度计算逻辑。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值