2.4.rpx单位有内置的视图容器组件
2024-09-18 17:19:42
所有的视图组件,包括view、swiper等,本身不显示任何可视化元素。它们的用途都是为了包裹其他真正显示的组件。
# view
视图容器。
它类似于传统html中的div,用于包裹各种元素内容。
如果使用nvue,则需注意,包裹文字应该使用<text>
组件。
属性说明
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
hover-class | String | none | 指定按下去的样式类。当 hover-class="none" 时,没有点击态效果 |
hover-stop-propagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态,App、H5、支付宝小程序、百度小程序不支持(支付宝小程序、百度小程序文档中都有此属性,实测未支持) |
hover-start-time | Number | 50 | 按住后多久出现点击态,单位毫秒 |
hover-stay-time | Number | 400 | 手指松开后点击态保留时间,单位毫秒 |
示例 查看演示
以下示例代码,来自于hello uni-app项目,推荐使用HBuilderX,新建uni-app项目,选择hello uni-app模板,可快速体验完整示例。
<!-- 本示例未包含完整css,获取外链css请参考上文,在hello uni-app项目中查看 -->
<template>
<view>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title uni-common-mt">
flex-direction: row
<text>\n横向布局</text>
</view>
<view class="uni-flex uni-row">
<view class="flex-item uni-bg-red">A</view>
<view class="flex-item uni-bg-green">B</view>
<view class="flex-item uni-bg-blue">C</view>
</view>
<view class="uni-title uni-common-mt">
flex-direction: column
<text>\n纵向布局</text>
</view>
<view class="uni-flex uni-column">
<view class="flex-item flex-item-V uni-bg-red">A</view>
<view class="flex-item flex-item-V uni-bg-green">B</view>
<view class="flex-item flex-item-V uni-bg-blue">C</view>
</view>
</view>
</view>
</template>
Tips
- 小程序平台如果使用
<div>
,编译时会被转换为<view>
。 - App平台 Vue2 项目在节点非常多时可以尝试使用
<div>
替换<view>
以提升渲染性能。
# rpx
下面对 rpx
详细说明:
设计师在提供设计图时,一般只提供一个分辨率的图。
严格按设计图标注的 px 做开发,在不同宽度的手机上界面很容易变形。
而且主要是宽度变形。高度一般因为有滚动条,不容易出问题。由此,引发了较强的动态宽度单位需求。
微信小程序设计了 rpx 解决这个问题。uni-app
在 App 端、H5 端都支持了 rpx
,并且可以配置不同屏幕宽度的计算方式,具体参考:rpx 计算配置。
rpx 是相对于基准宽度的单位,可以根据屏幕宽度进行自适应。uni-app
规定屏幕基准宽度 750rpx。
开发者可以通过设计稿基准宽度计算页面元素 rpx 值,设计稿 1px 与框架样式 1rpx 转换公式如下:
设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx
换言之,页面元素宽度在 uni-app
中的宽度计算公式:
750 * 元素在设计稿中的宽度 / 设计稿基准宽度
举例说明:
- 若设计稿宽度为 750px,元素 A 在设计稿上的宽度为 100px,那么元素 A 在
uni-app
里面的宽度应该设为:750 * 100 / 750
,结果为:100rpx。 - 若设计稿宽度为 640px,元素 A 在设计稿上的宽度为 100px,那么元素 A 在
uni-app
里面的宽度应该设为:750 * 100 / 640
,结果为:117rpx。 - 若设计稿宽度为 375px,元素 B 在设计稿上的宽度为 200px,那么元素 B 在
uni-app
里面的宽度应该设为:750 * 200 / 375
,结果为:400rpx。
Tips
- 注意 rpx 是和宽度相关的单位,屏幕越宽,该值实际像素越大。如不想根据屏幕宽度缩放,则应该使用 px 单位。
- 如果开发者在字体或高度中也使用了 rpx ,那么需注意这样的写法意味着随着屏幕变宽,字体会变大、高度会变大。如果你需要固定高度,则应该使用 px 。
- rpx 不支持动态横竖屏切换计算,使用 rpx 建议锁定屏幕方向
- 设计师可以用 iPhone6 作为视觉稿的标准。
- 如果设计稿不是 750px,HBuilderX 提供了自动换算的工具,详见:HBuilderX中自动转换px为upx。
- App 端,在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位,只支持 px,不支持 rpx。
- 早期 uni-app 提供了 upx ,目前已经推荐统一改为 rpx 了,详见
# icon
图标。
平台差异说明
App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节跳动小程序、飞书小程序 | QQ小程序 | 快应用 | 360小程序 | 快手小程序 | 京东小程序 |
---|---|---|---|---|---|---|---|---|---|---|
√ | √(2.2.3+) | √ | √ | √ | √ | √ | √ | √ | √ | √ |
Tips
- 由于 icon 组件各端表现存在差异,可以通过使用 字体图标 的方式来弥补各端差异。
属性说明
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
type | String | icon的类型 | |
size | Number | 23 | icon的大小,单位px |
color | Color | icon的颜色,同css的color |
各平台 type 有效值说明:
平台 | type 有效值 |
---|---|
App、H5、微信小程序、QQ小程序 | success, success_no_circle, info, warn, waiting, cancel, download, search, clear |
支付宝小程序 | info, warn, waiting, cancel, download, search, clear, success, success_no_circle,loading |
百度小程序 | success, info, warn, waiting, success_no_circle, clear, search, personal, setting, top, close, cancel, download, checkboxSelected, radioSelected, radioUnselect |
示例
<view class="item" v-for="(value,index) in iconType" :key="index">
<icon :type="value" size="26"/>
<text>{{value}}</text>
</view>
export default {
data() {
return {
iconType: ['success']
}
},
onLoad() {
// #ifdef APP-PLUS|| MP-WEIXIN
this.iconType = ['success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search','clear']
// #endif
// #ifdef MP-ALIPAY
this.iconType = ['info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear', 'success', 'success_no_circle', 'loading']
// #endif
// #ifdef MP-BAIDU
this.iconType = ['success', 'info', 'warn', 'waiting', 'success_no_circle', 'clear', 'search', 'personal', 'setting', 'top', 'close', 'cancel', 'download', 'checkboxSelected', 'radioSelected', 'radioUnselect']
// #endif
}
}
# text
文本组件。
用于包裹文本内容。
属性说明
属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
---|---|---|---|---|
selectable | Boolean | false | 文本是否可选 | |
user-select | Boolean | false | 文本是否可选 | 微信小程序 |
space | String | 显示连续空格 | 钉钉小程序不支持 | |
decode | Boolean | false | 是否解码 | 百度、钉钉小程序不支持 |
space 值说明
值 | 说明 |
---|---|
ensp | 中文字符空格一半大小 |
emsp | 中文字符空格大小 |
nbsp | 根据字体设置的空格大小 |
Tips
<text>
组件内只支持嵌套<text>
,不支持其它组件或自定义组件,否则会引发在不同平台的渲染差异。- 在app-nvue下,只有
<text>
才能包裹文本内容。无法在<view>
组件包裹文本。 - decode 可以解析的有
<
>
&
'
- 各个操作系统的空格标准并不一致。
- 除了文本节点以外的其他节点都无法长按选中。
- 支持
\n
方式换行。 - 如果使用
<span>
组件编译时会被转换为<text>
。
示例 查看演示
以下示例代码,来自于hello uni-app项目,推荐使用HBuilderX,新建uni-app项目,选择hello uni-app模板,可直接体验完整示例。
Template
<!-- 本示例未包含完整css,获取外链css请参考上文,在hello uni-app项目中查看 -->
<template>
<view>
<view class="uni-padding-wrap uni-common-mt">
<view class="text-box" scroll-y="true">
<text>{{text}}</text>
</view>
<view class="uni-btn-v">
<button type="primary" :disabled="!canAdd" @click="add">add line</button>
<button type="warn" :disabled="!canRemove" @click="remove">remove line</button>
</view>
</view>
</view>
</template>
js
<script>
export default {
data() {
return {
texts: [
'HBuilder,500万开发者选择的IDE',
'MUI,轻巧、漂亮的前端开源框架',
'wap2app,M站快速转换原生体验的App',
'5+Runtime,为HTML5插上原生的翅膀',
'HBuilderX,轻巧、极速,极客编辑器',
'uni-app,终极跨平台方案',
'HBuilder,500万开发者选择的IDE',
'MUI,轻巧、漂亮的前端开源框架',
'wap2app,M站快速转换原生体验的App',
'5+Runtime,为HTML5插上原生的翅膀',
'HBuilderX,轻巧、极速,极客编辑器',
'uni-app,终极跨平台方案',
'......'
],
text: '',
canAdd: true,
canRemove: false,
extraLine: []
}
},
methods: {
add: function(e) {
this.extraLine.push(this.texts[this.extraLine.length % 12]);
this.text = this.extraLine.join('\n');
this.canAdd = this.extraLine.length < 12;
this.canRemove = this.extraLine.length > 0;
},
remove: function(e) {
if (this.extraLine.length > 0) {
this.extraLine.pop();
this.text = this.extraLine.join('\n');
this.canAdd = this.extraLine.length < 12;
this.canRemove = this.extraLine.length > 0;
}
}
}
}
</script>
注意事项
- nvue 样式
word-wrap
在 Android 平台暂不支持
最新文章
- javaFx:使用弹出对话框 Alert
- PHP 删除目录及目录下文件
- 【POJ 1743】Musical Theme
- Android——Canvas类的学习
- ios7隐藏系统底部导航
- VMware下安装的Mac OS X如何修改显示分辨率
- Android中使用logwrapper来重定向应用程序的标准输出
- C# 墙纸更换程序
- python使用psutil获取服务器信息
- PHP 汉字转拼音(首拼音,所有拼音)
- Objective-C代码块语法(block)使用
- 【原创】使用workstation安装Xenserver 6.5+cloudstack 4.10----本地存储模式
- mongodb数据库安装
- 邓_phpcms_phpcms授课思路复习
- es分布式文档系统_bulk api的奇特json格式与底层性能优化关系
- SpringMVC,Controller的返回页面类型以及路径设置默认值
- VS2008中设置字体大小和添加显示行号
- 小波变换——哈尔小波,Haar
- mysql 与sqlser group by
- DBA_2PC_PENDING (转)