weex<==>nvue书写样式需要注意的点(全部)

2023-11-16

weex书写步骤
全局样式规划:将整个页面分割成合适的模块。
flex 布局:排列和对齐页面模块。
定位盒子:定位并设置偏移量。
细节样式处理:增加特定的具体样式。

1.通用样式

/*除此通用样式之外的属性,均不被支持*/
1.单位只支持px和wx(不受屏幕宽度和viewPortWidth影响),不支持相对单位(em、rem)和百分比,vw/vh等;
2. 盒模型的 box-sizing 默认为 border-box,即盒子的宽高包含内容、内边距和边框的宽度,不包含外边距的宽度。(所以使用padding时应注意,会挤压内容)
3. overflow, 在 Android 平台,Weex 只支持 overflow:hidden。在 iOS 上,Weex 支持 overflow:hidden 和 overflow:visible,默认是 overflow:visible。
4. padding | margin  四个方向都一样可以简写,否则需分别设置
/*		padding {length}: 上、下、左、右四边内边距,默认值 0
		padding-left {length}:左内边距,默认值 0
		padding-right {length}:右内边距,默认值 0
		padding-top {length}:上内边距,默认值 0
		padding-bottom {length}:下内边距,默认值 0*/
5.background | border  |transition 等 不支持简写
/*	 border-style | border-bottom-style:solid ;
	 border-color | border-bottom-color: #E8E8E8;
     border-width | border-bottom-width: 1px;*/
6.Flexbox 是默认且唯一的布局模型,所以你不需要手动为元素添加 display: flex,默认值为 column	 

详情见我的weexNative或则css

7.position (这个基本差不多)
	/*	relative 是默认值,指的是相对定位;
		absolute 是绝对定位,以元素的容器作为参考系;
		fixed 保证元素在页面窗口中的对应位置显示;
		sticky 指的是仅当元素滚动到页面之外时,元素会固定在页面窗口的顶部。*/
8.目前仅 iOS 支持 box-shadow 属性,Android 暂不支持,可以使用图片代替。
		每个元素只支持设置一个阴影效果,不支持多个阴影同时作用于一个元素。

2.文本样式

/*文本类组件共享一些通用样式, 这类组件目前包括 <text>、<input>和<richtext>*/
&&&&&weex 文字必须放在text 下,否则无法进行以下文本设置&&&&&
color{color} (如果在不是文本类组件内设置 会不生效) 
/*age:
<style >
.red{
color:red;
}
</style >
<div class="red">文本</div>   此文本 将还是默认的黑色
*/
font-size {number}:文字大小(如果在不是文本类组件内设置 会不生效)
/*age:
<style >
.font{
font-size:28px;
}
</style >
<div class="font">文本</div>   此文本 将还是默认大小 
*/


font-style
font-style {string}:字体类别。可选值 normal | italic,默认为 normal。

font-weight
font-weight {string}:字体粗细程度

可选值: normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900
normal 等同于 400, bold 等同于 700;
默认值: normal;iOS 支持 9 种 font-weight值;Android 仅支持 400700, 其他值会设为 400700

text-decoration
text-decoration {string}:字体装饰,可选值 none | underline | line-through,默认值为 none。

WARNING WARNING WARNING WARNING 

只支持 <text><ricthext>  WARNING WARNING

text-align     &&&&(不支持使用在div等组件)&&&&
text-align {string}:对齐方式。可选值 left | center | right,默认值为 left。

font-family
font-family {string}:设置字体。这个设置 不保证 在不同平台,设备间的一致性。如所选设置在平台上不可用,将会降级到平台默认字体。如果需要加载自定义字体,请参考相关dom.addRule。

text-overflow
text-overflow {string}:设置内容超长时的省略样式。可选值 clip | ellipsis

WARNING WARNING  WARNING  

只支持 <text><ricthext> WARNING  WARNING

lines
lines {number}: 正整数,指定最大文本行数,默认值为0,表示不限制最大行数。如果文本不够长,实际展示行数会小于指定行数。

&&&line-height&&&&
line-height {length}:正整数,每行文字高度。line-height是 top 至 bottom 的距离。line-heightline-height与font-size没有关系,因为line-height被 top 和 bottom 所限制,font-size 被 glyph 所解析。line-height和font-size相等一般会导致文字被截断。

word-wrap
word-wrap:<string> break-word | normal | anywhere. 对 Weex 来说 anywhere 表示在以字符为最小元素做截断换行,其它值或不指定该属性,都以英文单词为单位进行换行。

3.list 回收cell

/*<list> 的子组件只能包括以下四种组件或是 fix 定位的组件,其他形式的组件将不能被正确渲染。

<cell>
用于定义列表中的子列表项,类似于 HTML 中的 ul 之于 li。Weex 会对 <cell> 进行高效的内存回收以达到更好的性能。
<header>
当 <header> 到达屏幕顶部时,吸附在屏幕顶部。
<refresh>
用于给列表添加下拉刷新的功能。
<loading>
<loading> 用法与特性和 <refresh> 类似,用于给列表添加上拉加载更多的功能。*/
如果 cell 太多会导致在屏幕外的cell 初始化时被回收,直到滑动cell再次出现在屏幕中才会显示,

WARNING WARNING  WARNING  
但是像地图显示不出来  ,(解决办法==》将所有东西 放在一个cell ,不用多个cell)





本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

weex<==>nvue书写样式需要注意的点(全部) 的相关文章

  • 在 Visual Studio 中逐步完成“托管到本机转换”?

    在试图回答的同时这个问题 https stackoverflow com questions 9378626我决定需要在调试器视图中手动单步执行编组过程 不幸的是 Visual Studio 似乎直接跳过了所有这些有趣的代码 这是 P In
  • 如何从本机 c 调用 C#(mono、.net)方法、委托

    是否可以从本机 C 代码调用以托管代码 可能在类或库中 编写的 C 方法 以及如何调用 thx 编辑 对于 c 我主要指的是 mono 甚至 portable net 操作系统是 Linux 您的 C 代码可以定义函数来注册回调 C 代码可
  • nar-maven-plugin 和 native-library-loader 不加载本机库

    我使用 nar maven plugin 进行测试 然后在下一个项目中我需要 JNI 我选择了it0003 https github com maven nar nar maven plugin tree master src it it0
  • 这些运算符是什么意思(**、^、%、//)? [关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 标准以外的其他 and 运营商 但这
  • 使用JNI而不是JNA调用本机代码?

    与 JNI 相比 JNA 似乎更容易用来调用本机代码 在什么情况下您会使用 JNI 而不是 JNA JNA 不支持 C 类的映射 因此如果您使用 C 库 则需要 jni 包装器 如果你需要大量的内存复制 例如 您调用一个方法 该方法返回一个
  • 编写软件时 64 位相对于 32 位的优势 [重复]

    这个问题在这里已经有答案了 如果我有一个像 HelloWorld 这样用 C 编写的简单程序 然后我在 32 位和 64 位的机器上编译它 我会得到两个不同的二进制文件做同样的事情 但它们是不同的机器代码 只有 32 位二进制文 件能够在
  • 在本机反应中需要类('com.google.android.gms.location.FusedLocationProviderClient'的声明)

    这早些时候工作得很好 可能的未处理的 Promise 拒绝 id 0 错误 调用本机方法时遇到异常 在模块 ExpoLocation 上执行导出方法 getLastKnownPositionAsync 时发生异常 找到接口 com goog
  • 无 DOM、静态类型、提前编译的 JavaScript 代码与本机代码的性能相比如何?

    为什么 Javascript 比本机代码慢 的传统答案是 因为它被解释了 这种说法的问题在于解释并不是语言本身的品质 事实上 现在大多数 Javascript 代码都经过 JIT 处理 但这还远未接近本机速度 如果我们从方程中删除解释因素并
  • 停止使用 Android 原生相机保存照片

    我正在使用本机 Android 相机并将文件保存到我的应用程序数据文件夹 mnt sdcard Android data com company app files Pictures 同时 照片的另一个副本将保存到 DCIM 文件夹中 这是
  • Flutter - ListView.builder:初始滚动位置

    我想设置 ListView builder 的初始滚动位置 我希望列表从底部开始0 0 如果我设置reverse当然 在 listView 上 我将初始滚动位置设置为所需的位置 但我需要的是让最后一个孩子位于底部 是一个聊天应用程序 这是列
  • 在自己的函数中响应导航 onPress

    我已经实现了教程中的 React Navigation 示例https reactnavigation org docs intro https reactnavigation org docs intro 而且效果很好
  • JPA中原生查询的字段值

    如何获取本机查询 JPA 中某些字段的值 例如我想获取客户表的姓名和年龄 Query q em createNativeQuery SELECT name age FROM customer WHERE id 注意 我不想将结果映射到实体
  • 我想在启动画面中播放lottie动画React Native

    在 React Native 中 在应用程序启动之前 我们可以看到白屏 我想在单击应用程序图标时立即加载启动屏幕 我想避免白色背景 Using 反应本机启动画面 https github com crazycodeboy react nat
  • 从 React Native 中的 api 拦截器(组件外部)重定向到屏幕

    我正在开发一个 React Native 应用程序 该应用程序使用 JWT 令牌对请求进行身份验证 为此 我创建了 axios 请求和响应拦截器 将令牌添加到每个请求 请求拦截器 并在响应具有 401 HTTP 状态 响应拦截器 时将用户重
  • 使用Java Reflection,你能检测一个方法是否是Native的吗?

    使用 Java Reflection 您可以检测所有方法及其返回类型 但是有没有办法检测一个方法是否被声明为native or not 是的 你可以 方法getModifiers 返回一个应用了正确掩码的 int 可以告诉您该方法是否是本机
  • 为什么在 Android 上重定向 stdout/stderr 不起作用?

    我下载了 SDL 1 3 并在我的 android 2 2 设备上将其与 OpenGL ES 一起进行了测试 它工作正常 但我没有得到输出printf来电 我尝试了下面的命令 如安卓开发者页面 http developer android
  • E/未知:React:本机调用中出现异常

    我通过模拟器运行 Android 应用程序 但出现了如下错误 不知道如何修复它 有知道解决办法的人吗 请帮忙 thanks E unknown React Exception in native call java lang Runtime
  • Android 8 本机库崩溃

    自从 Android 8 Oreo 推出以来 我们的应用程序一直在不同的地方崩溃 所有 Play 商店崩溃报告都显示本机崩溃 最常出现的一个似乎是在本机库中 最常崩溃的设备是 Google Pixel Pixel XL 也出现过一些崩溃 我
  • 如何判断一个app是原生的还是html5的? [关闭]

    Closed 这个问题是无关 help closed questions 目前不接受答案 我想知道移动应用程序是如何原生或 html5 的 有没有什么软件或者网站可以说明这一点 如何检测应用程序是本机应用程序还是 html5 您可以使用 w
  • 有人尝试过用 C 或 C++ 为 Blackberry 平台进行开发吗?

    根据我在嵌入式计算方面的经验 我得到的每一个迹象都是 做这样的事情需要昂贵的设备才能访问平台 ICE 调试器 JTAG 探针 I2C 编程器等 但我一直想知道是否一些雄心勃勃的黑客已经找到了一种在黑莓设备上加载本机代码的方法 任何人 编辑

随机推荐

  • java基础面试题系列(21 -30)

    20200708 by 1z 请你解释Object如果不重写hashcode 的话 hashcode 是如何计算出来的 Object的hashcode方法是本地方法 是使用c语言或者c 语言实现的 通常是根据 某种策略而形成的 hashco
  • 春秋云镜 CVE-2022-0410

    春秋云镜 CVE 2022 0410 WordPress plugin The WP Visitor Statistics SQLI 靶标介绍 WordPress plugin The WP Visitor Statistics Real
  • Mysql精华总结01——架构、存储引擎和数据类型

    一 Mysql架构 和其它数据库相比 MySQL有点与众不同 它的架构可以在多种不同场景中应用并发挥良好作用 主要体现在存储引擎的架构上 插件式的存储引擎架构将查询处理和其它的系统任务以及数据的存储提取相分离 这种架构可以根据业务的需求和实
  • 显卡RTX2080 + CUDA10 + win10 + tensorflow配置安装探坑记

    步骤主要参考该博客https blog csdn net mayunhe cs article details 87216299 结合自己探坑经历记录了具体过程 1 安装显卡驱动 先是在微星官网上下载对应显卡的驱动 不知道为啥给的是nvid
  • 前端学习--常用PS方法

    本文使用的软件为ps CC 2019 1 切图 1 打开一张psd文件 2 取消背景色 3 选择切片工具 4 按住 CTRL 键进行切图 切完后自行调整切图宽高 当切好第一张图后同时按住 CTRL 和 ALT 可按照的第一张切图的宽高进行第
  • Redis主从复制失败(master_link_status:down)

    Redis配置主从复制时遇到这个问题 先确认配置文件没有不对后开始苦恼 在网上查这个问题发现说的都一样 根据网上的再排查配置文件还是没有问题 又确认了不是防火墙的问题 陷入了更大的苦恼 后来看到了stackoverflow上一个评论 意识到
  • 数据库设计-简化字典表

    在进行数据库设计时 我们经常会遇到各种各样的业务需求 从而设计出各种各样的表 而想要做好一个数据库 不但需要前期对各种业务需求的深度理解 还需要在后期项目完善的过程中对数据库更新修改从而使得数据库设计的越发完美 对于那些涉及到业务的表或许不
  • 我希望在 25 岁时知道的14件事(现在我已经 38 岁了)

    我在 38 岁生日后不久写作 是反思的时候了 我不得不把我现在所知道的一点点传递出去 1 专注于变得有用 所有这些关于寻找快乐和做你热衷的事情都是一种分心 专注于建立你对世界的价值 当然 首先要尝试很多东西 然后逐渐开始专注于在更少的事情上
  • Dubbo架构整体设计

    一 Dubbo调用关系说明 1 1 组成部分 在这里主要由四部分组成 Provider 暴露服务的服务提供方 Protocol 负责提供者和消费者之间的协议交互数据 Service 真实的业务服务信息 可以理解成接口和实现 Containe
  • 神经网络综述

    本文指在介绍机器学习中的神经网络的多种变种 包括简单的代码实现及优缺点并尽量不涉及到公式 希望能给阅读者建立起一个关于神经网络的综合概念 因此 本文会涉及到一点神经网络的原理但不会太深入以致于读者迷失在其中而无法得到一个全局性的概念 另外
  • SQLServer2019安装教程

    可以去官网下载 我百度网盘也有都一样 https pan baidu com s 1i3umqHXSUMbxJ9rRi6mU4A 提取码 5g9q 打开应用程序 点击安装 点第一个全新得SQL server独立安装 下一步 在这一步可能有需
  • TCP-IP详解:超时重传机制

    参考教材 TCP IP Guide 超时重传是TCP保证数据传输可靠性的又一大措施 本文主要介绍重传TCP报文的两大举措 超时重传和快速重传 超时重传机制 超时重传指的是 发送数据包在一定的时间周期内没有收到相应的ACK 等待一定的时间 超
  • 几款好用的指纹识别工具

    几款好用的指纹识别工具 在web渗透过程中 对站点进行指纹探测识别非常重要 了解网站所用的web框架或者cms可以为后续的渗透提供思路和突破口 这篇文章主要用于总结几款我平时工作中经常使用的指纹识别工具 一 whatweb whatweb是
  • Python Requests使用Cookie的几种方式

    本文主要给大家介绍了关于Python Requests使用Cookie的几种方式 Python中的requests库可以使用cookie来维持会话状态 实现登录等操作 需要的朋友可以参考下 一 通过headers参数使用 通过headers
  • c语言实现字符串的指定位置删除

    要求 任意输入一串字符串 指定要删除的位置 并输入要删除指定位置后字符的个数 实现代码如下 include
  • el-table绑定的数组里面的对象值进行修改时,视图没有更新

    在Vue js中 如果您在对绑定到el table的数组里面的对象值进行修改后发现视图没有更新 可能是因为Vue js无法检测到数据的变化 解决这个问题的方法有以下几种 使用Vue set 方法显式地告诉Vue js数据已经发生了变化 例如
  • GNN等优缺点总结及解决方案

    https www zhihu com question 338051122 https www zhihu com question 346942899 https zhuanlan zhihu com p 291230435 GCN的缺
  • STM32实现MLX90614非接触测温串口显示(标准库与HAL库实现)

    目录 模块选择 编程环境 MLX90614基本原理 通信协议 SMBus通信 类IIC通信 代码实现 STM32与模块之间接线表 1 标准库实现温度采集 2 HAL库实现温度采集 模块选择 STM32F103C8T6 MLX90614 非接
  • 多目标跟踪问题

    A Baseline for 3D Multi Object Tracking 三维多目标跟踪 原文地址 https arxiv org pdf 1907 03961v4 pdf 用到的基础知识 卡尔曼滤波 和 匈牙利算法 匈牙利算法用来求
  • weex<==>nvue书写样式需要注意的点(全部)

    weex书写步骤 全局样式规划 将整个页面分割成合适的模块 flex 布局 排列和对齐页面模块 定位盒子 定位并设置偏移量 细节样式处理 增加特定的具体样式 1 通用样式 除此通用样式之外的属性 均不被支持 1 单位只支持px和wx 不受屏