2.4.rpx单位有内置的视图容器组件

所有的视图组件，包括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 平台暂不支持