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

最新推荐文章于 2024-12-06 18:34:24 发布

原创最新推荐文章于 2024-12-06 18:34:24 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

笔记专栏收录该内容

17 篇文章

订阅专栏

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

在这里插入图片描述

:style="{top:'calc(50% -'+ height+'rpx)'}"

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

chenronglong20

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

uniapp小程序map（点击地图增加maker，聚合、自定义聚合样式）

_小郑有点困了的博客

12-28

4102

小程序端开发地图组件，点击地图上任何一个位置，增加一个maker，点击maker触发另外的事件。

【uniapp】开发微信小程序自定义底部tabbar

韩旭不会敲代码吧的博客

04-19

1万+

uniapp开发微信小程序自定义底部tabbar

参与评论您还未登录，请先登录后发表或查看评论

记录微信小程序 height: calc(xx – xx)；无效问题

12-30

遇到一个小问题，记录一下问题：在微信小程序中使用scroll-view标签时，用height:cale(xx – xx)设置高度无效，在page中设置高度为百分百依旧无效解决办法：直接在最大的view标签中设置高度为百分百即可  page { height: 100%; } .videoList { height: calc(100% - 480rpx); }

记录微信小程序 height: calc(xx - xx)；无效问题

10-15

主要介绍了微信小程序 - height: calc(xx - xx)；无效问题，文中给大家扩展介绍下jquery点击添加样式，再次点击移除样式的实例代码,需要的朋友可以参考下

【uniapp】CSS3 的 calc() 函数使用表达式动态计算

sayyy的专栏

08-05

5478

前言 css3 中增加了 calc() 函数 calc() 函数语法：property: calc(expression) expression 表达式为： “+”、 “-”、"*"、"/" 表达式 “+”、 “-“符号前后必须为空格，比如：calc(50% - 8px)。”*”、"/"符合无此要求。 expression 表达式中允许嵌套函数（var 函数可以获取css变量），例如：.foo { --widthA: 100px; --widthB: calc(var(--widthA) / 2)

uniapp实现简易计算器

weixin_47586598的博客

03-20

1941

uniapp实现简易计算器

uniapp开发必须了解的知识

坚持原创

12-31

7482

有学过微信小程序开发和vue的，uniapp开发成本低，但是还是不能忽视了注意事项，别给自己带来麻烦，以下是我从官网上抽取的，希望接下来的开发能够顺利进行，文字有点多，但细看益处多多，go~~~ 开发工具下载标准版，在运行或发行uni-app时，会提示安装uni-app插件下载App开发版，可开箱即用如使用cli方式创建项目，可直接下载标准版，因为uni-app编译插件被安装到项目下了。可...

uniapp微信小程序scroll-view动态style样式高度和宽度中的calc属性

FUFCY的博客

03-24

2542

<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

1588

uni-app中使用calc，控制台显示属性值无效？

uniapp 小程序生成二维码 (兼容H5、微信小程序)

qzo_smile的博客

05-17

1万+

背景: 在购买电影票时，生成的取票码普通文本生成二维码，识别到的值也是普通文本，例如：条形码，电影取票码内容实质都为普通文本；平台区别： 1、jquery.qrcode,js （H5使用）是一个用于生成二维码的 JavaScript 库，主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。 小程序没有DOM概念，所以不能通用； 2、weapp-qrcode-canvas-2d https://developers.weixin.qq.com/communi..

uniapp局部滚动，动态style带有calc计算

RainHg的博客

04-26

1177

uniapp实现局部/区域滚动，使用createSelectorQuery获取节点信息，动态style带有calc计算

内联css使用calc()写法 + 固定自定义导航栏

m0_68630350的博客

10-07

485

内联css使用calc()写法 + 固定自定义导航栏

uniapp中使用calc计算的坑

QQMESSI

05-14

3256

错误写法： height: calc(100vh-100rpx) 正确写法 height: calc(100vh - 100rpx) 睁大眼睛找不同，有没有发现在calc中“100vh”和“100rpx”与中间“-”加了个空格，对，就是这么坑，我之前以为uniapp不支持calc计算不同单位呢，后来才发现这个坑。 ...

微信小程序uni-app+vue3实现局部上下拉刷新和scroll-view动态高度计算

qq_74177889的博客

12-06

2706

属性/事件类型默认值必填说明string是设置scroll-view高度,不设置无法滚动scroll-ybooleanfalse否是否允许纵向滚动scroll-xbooleanfalse否是否允许横向滚动booleanfalse否是否开启下拉刷新功能booleanfalse否当前下拉刷新状态booleanfalse否是否开启被动监听滚动事件booleantrue否是否显示滚动条function否下拉刷新触发时的回调function。

uniapp 将css中calc得到的值取反示例

weixin_46337813的博客

11-06

973

<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

1902

var(--status-bar-height) //获取状态栏的高度 height: calc(100% - 200rpx - var(--status-bar-height));//通过calc计算属性获取想要的高度

uniapp中动态设置clac

weixin_44953689的博客

03-03

639

:style="{ maxHeight: 'calc(100vh - ' +headerTop + 'px - 49px)'}"

uniapp动态设置style和class样式

最新发布

09-13

虽然提供的引用未直接提及uniapp小程序中safeArea的相关信息，但可以从通用的uniapp知识来介绍。 ### safeArea的作用在移动设备上，不同的屏幕有不同的形状和尺寸，例如全面屏手机可能存在刘海、圆角等特殊区域。safeArea 用于标识屏幕上安全显示内容的区域，避免内容被这些特殊区域遮挡，保证内容在各种设备上都能正常显示，提高用户体验。 ### safeArea的使用方法在 uniapp 小程序中，可以通过 `uni.getSystemInfo` 方法获取设备的安全区域信息。示例代码如下： ```javascript uni.getSystemInfo({ success: function (res) { console.log('安全区域信息:', res.safeArea); // safeArea 包含 left、right、top、bottom、width、height 等属性 // 可以根据这些属性来布局页面，确保内容显示在安全区域内 } }); ``` 在页面布局中，可以结合 CSS 样式使用 safeArea 的信息。例如，为了让内容不被刘海遮挡，可以根据 `safeArea.top` 的值设置顶部的内边距： ```vue <template> <view class="container">  </view> </template> <style> .container { padding-top: var(--status-bar-height); /* 状态栏高度 */ padding-top: calc(var(--status-bar-height) + constant(safe-area-inset-top)); padding-top: calc(var(--status-bar-height) + env(safe-area-inset-top)); } </style> ``` 这里使用了 CSS 的 `constant` 和 `env` 函数来适配不同系统版本对 safeArea 的支持。 ### 解决方案示例如果遇到自定义导航栏被刘海遮挡的问题，可以结合 safeArea 进行适配。可以创建一个高阶组件来处理导航栏的安全区域问题，类似引用[3]中提到的创建 `NavbarWrapper.vue` 组件，通过设置 `padding` 使内容始终保持在安全区域，达到低耦合、可复用性强的效果。