小程序如何通过把动态数据值传入到css文件中控制样式

场景:动态改变一个模块的高度

一、常用解决方法:行内样式绑值,或者动态class来传递
<viewclass="box":style="`height: ${boxHeight}px`">我是一个动态高度的box,我的高度是{{boxHeight}}px
</view>

在这里插入图片描述

二、高度传到css文件中
<viewclass="box":style="{'--boxHeight': `${boxHeight}px`}">我是一个动态高度的box
</view>
// .css文件
.box {height: var(--boxHeight); // 这里必须与行内的key对应,var不可少border: 1px solid red;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/812293.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

第07-1章 计算机网络相关概念

7.1 本章目标 了解网络协议的概念了解网络体系结构熟悉ISO/OSI参考模型以及每一层的功能掌握TCP/IP模型各层的主要协议及其功能熟练掌握IP地址、子网规划等相关内容 7.2 网络协议的概念 7.2.1 概念介绍 &#xff08;1&#xff09;网络协议&#xff1a;计算机网络和分布系统中…

循序渐进丨MogDB 数据库带级联从库的集群切换后如何保持原有架构?

生产数据库运行过程中可能会涉及到升级或者打补丁&#xff0c;导致各节点的角色有计划的发生改变。如果集群内角色发生改变&#xff0c;是否还能保持原有架构继续对外提供服务呢&#xff1f;我们来做一下测试。 采用22模式模拟同城两机房部署4节点 MogDB 数据库集群&#xff0c…

K8S临时存储-本地存储-PV和PVC的使用-动态存储(StorageClass)

介绍 容器中的文件在磁盘上是临时存放的&#xff0c;当容器崩溃或停止时容器上面的数据未保存&#xff0c; 因此在容器生命周期内创建或修改的所有文件都将丢失。 在崩溃期间&#xff0c;kubelet 会以干净的状态重新启动容器。 当多个容器在一个 Pod 中运行并且需要共享文件时…

gitlab、jenkins安装及使用文档二

安装 jenkins IP地址操作系统服务版本192.168.75.137Rocky9.2jenkins 2.450-1.1 jdk 11.0.22 git 2.39.3192.168.75.138Rocky9.2gitlab-ce 16.10.0 结合上文 jenkins安装 前期准备&#xff1a; yum install -y epel-release yum -y install net-tools vim lrzsz wget…

WSL访问adb usb device

1.Windows上用PowerShell运行&#xff1a; winget install --interactive --exact dorssel.usbipd-win 2.在WSLUbuntu上终端运行&#xff1a; sudo apt install linux-tools-generic hwdata sudo update-alternatives --install /usr/local/bin/usbip usbip /usr/lib/linux-too…

Gitea是一个开源、轻量级的自托管Git解决方案

Gitea介绍 Gitea是一个由Go语言编写的、轻量级的、自托管的Git解决方案&#xff0c;类似于GitHub、GitLab等平台。它是用Go语言编写的开源软件&#xff0c;提供了Git版本控制系统的基本功能&#xff0c;包括代码托管、问题跟踪、代码审查、Wiki等。Gitea的设计目标是简单易用、…

Swift中的枚举

在Swift中&#xff0c;枚举&#xff08;Enumeration&#xff09;是一种定义一组相关值的方式。枚举可以包含零个或多个成员&#xff0c;每个成员可以有关联的值。枚举可以用于定义一组相关的选项、状态或错误类型。 以下是Swift中定义枚举的示例&#xff1a; //定义一个简单的…

酷开科技OTT大屏营销:开启新时代的营销革命

随着互联网技术的不断发展和普及&#xff0c;大屏已经成为越来越多家庭选择的娱乐方式。在这个背景下&#xff0c;酷开科技凭借其强大的技术实力和敏锐的市场洞察力&#xff0c;成功地将大屏转化为一种新的营销渠道&#xff0c;为品牌和企业带来了前所未有的商业机会。 酷开科技…

爬虫jsoup解析工具之解析标题

package day01;import org.jsoup.Jsoup; import org.jsoup.nodes.Document; import org.junit.Test; import java.net.URL; public class JsoupFirstTest {Testpublic void main() throws Exception {/** <!--jsoup解析工具所需依赖--><dependency><groupId>…

【数据结构与算法篇】双链表实现

【数据结构与算法篇】双链表实现&#xff08;近300行实现代码&#xff09; &#x1f955;个人主页&#xff1a;开敲&#x1f349; &#x1f525;所属专栏&#xff1a;数据结构与算法&#x1f345; &#x1f33c;文章目录&#x1f33c; 1. List.h 头文件的声明 2. List.c 源文…

上海计算机学会 2023年9月月赛 乙组T3 工程建设(拓扑排序)

第三题&#xff1a;T3工程建设 标签&#xff1a;拓扑排序题意&#xff1a;有 n n n个建设任务&#xff0c;第 i i i个建设任务完成时间为 t i t_i ti​。给定 m m m个前置任务要求&#xff0c;第 j j j条规则&#xff0c;若要开工 b j b_j bj​号任务&#xff0c;必须先完成 a…

etcd相关知识整理归纳 —— 筑梦之路

什么是etcd? Etcd 是 CoreOS 团队于2013年6月发起的开源项目&#xff0c;它的目标是构建一个高可用的分布式键值(key-value)数据库。etcd内部采用raft协议作为一致性算法&#xff0c;Etcd基于 Go 语言实现。 名字由来&#xff0c;它源于两个方面&#xff0c;unix的“/etc”文件…

安卓手机APP开发媒体内容部分__ExoPlayer支持的格式

安卓手机APP开发媒体内容部分__ExoPlayer支持的格式 目录 概述 可适配的流 DASH 光滑流 HLS 先进的容器的格式 RTSP 支持的采样格式 支持的网络类型 采样的格式 FFmpeg 代码库

软件概要设计说明书实际项目编制案例(直接套用)

1引言 1.1编写目的 1.2项目背景 1.3参考资料 2系统总体设计 2.1整体架构 2.2整体功能架构 2.3整体技术架构 2.4运行环境设计 2.5设计目标 3系统功能模块设计 3.1个人办公 3.2系统管理 4性能设计 4.1响应时间 4.2并发用户数 5接口设计 5.1接口设计原则 5.2接口…

【word2pdf】Springboot word转pdf(自学使用)

文章目录 概要整体介绍具体实现官网pom文件增加依赖 遇到的问题本地运行OK&#xff0c;发布到Linux报错还是本地OK&#xff0c;但是Linux能运行的&#xff0c;但是中文乱码 小结 概要 Springboot word 转 pdf 整体介绍 搜了一下&#xff0c;发现了能实现功能的方法有四种 U…

手写一个简单的 OrbitControls 轨道控制器

手写一个简单的 OrbitControls 轨道控制器 相信使用过THREE.JS的同学&#xff0c;都知道 OrbitControls 这个的轨道控制器&#xff0c;他是绕着一个观察点&#xff0c;来进行什么什么的… 反正就是那么个意思。 所以很明显OrbitControls的运动轨迹是一个球体&#xff0c;他是绕…

【我的代码生成器】React的FrmUser类源码

FrmUser 类的源码中&#xff1a;FrmUser btnSaveClick 等命名方式都是参考VB.Net的写法。 import React, { forwardRef, useImperativeHandle, useState, useEffect, } from "react"; import { makeStyles, TextField, Grid, Paper, Button, ButtonGroup, } from &q…

Ubuntu安装或卸载mariadb-server软件包

sudo apt install mariadb-server 检查MariaDB服务器的服务状态 service mariadb status 仅需要卸载MariaDB&#xff0c;而不是删除所有MariaDB相关软件包 sudo apt-get remove mariadb-server 从系统中完全删除MariaDB数据库&#xff0c;请按照以下步骤操作 sudo apt-get…

(delphi11最新学习资料) Object Pascal 学习笔记---第9章第3节( 真实世界中的异常处理)

9.3 真实世界中的异常处理 ​ 异常是一种很好的错误报告和错误处理机制&#xff08;不是在单个代码片段中&#xff0c;而是作为大型架构的一部分&#xff09;。一般来说&#xff0c;异常不应替代检查一个局部错误条件&#xff08;尽管有些开发人员会这样使用异常&#xff09;。…

AWTK 开源串口屏 MODBUS Server 模型

名称&#xff1a;modbus_server 功能&#xff1a;通过 modbus 协议提供服务&#xff0c;供远程客户端&#xff08;主站&#xff09;访问。 1. 创建 通过 modbus_server 创建模型。 示例&#xff1a; <window v-model"modbus_server" name"home_page&quo…