样式与布局 · uni-app跨平台移动应用开发

样式与布局 === [TOC] # 基本概念 ## 尺寸单位 uni-app 使用 upx 作为默认尺寸单位， upx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度750upx。开发者可以通过设计稿基准宽度计算页面元素 upx 值，设计稿 1px 与框架样式 1upx 转换公式如下： ``` 设计稿 1px / 设计稿基准宽度 = 框架样式 1upx / 750upx ``` 换言之，页面元素宽度在uni-app中的宽度计算公式： ``` 750 * 元素在设计稿中的宽度 / 设计稿基准宽度 ``` 举例说明： - 若设计稿宽度为 640px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在uni-app里面的宽度应该设为：`750 * 100 / 640`，结果为：117upx。 - 若设计稿宽度为 375px，元素 B 在设计稿上的宽度为 200px，那么元素 B 在uni-app里面的宽度应该设为：`750 * 200 / 375`，结果为：400upx。 > 建议：设计师可以用 iPhone6(375px) 作为视觉稿的标准。 > Tips：动态绑定的 style 不支持 upx ```  <view class="test" style="width:200upx"></view> ``` ```·  <view class="test" :style="{width:winWidth + 'upx;'}"></view> ``` > uni.upx2px(upx)函数可以将upx单位转换为px单位，在开发组件的时候一般都手动将upx转换为px实现动态绑定 ```  <view class="test" :style="{width:winWidthWithPx + 'px;'}"></view> ``` ## 样式导入使用`@import`语句可以导入外联样式表，`@import`后跟需要导入的外联样式表的相对路径，用;表示语句结束。示例代码： ``` <style> @import "../../components/teaset/teaset.css"; … </style> ``` 如果当前页面需要对标准库中的样式修改，可以使用重载的方式覆盖之前的定义。 ``` <style> @import "../../components/teaset/teaset.css"; .ts-badge { padding: 10upx; } </style> ``` ## 选择器目前支持的选择器有： - .class：.intro 选择所有拥有 class="intro" 的组件 - `#id`：`#firstname` 选择拥有 id="firstname" 的组件 - element：view 选择所有 view 组件 - element, element view, checkbox：选择所有文档的 view 组件和所有的 checkbox组件 - ::after view::after：在 view 组件后边插入内容，仅微信小程序和5+App生效 - ::before view::before：在 view 组件前边插入内容，仅微信小程序和5+App生效 ## 全局样式与局部样式定义在 App.vue 中的样式为全局样式，作用于每一个页面。在 pages 目录下的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。 - App.vue 中通过 `@import ` 语句可以导入外联样式，一样作用于每一个页面。一般我们将统一定义的标准组件库再App.vue中通过`@import`语句导入，避免每个页面都导入全局样式。 ## class与style绑定框架组件上支持使用 style、class 属性来控制组件的样式。 * style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。 * class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上，样式类名之间用空格分隔。为节约性能，我们将 Class 与 Style 的表达式通过 compiler 硬编码到 uni-app 中，支持语法和转换效果如下： class 支持的语法: ``` <view :class="{ active: isActive }">111</view> <view class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">222</view> <view class="static" :class="[activeClass, errorClass]">333</view> <view class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">444</view> <view class="static" v-bind:class="[{ active: isActive }, errorClass]">555</view> ``` style 支持的语法: ``` <view v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">666</view> <view v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">777</view> ``` > > 注意：以:style=""这样的方式设置px像素值，其值为实际像素，不会被编译器转换。可以用 computed 方法生成 class 或者 style 字符串插入到页面中，但是uni-app不支持 Class 与 Style 绑定中的 classObject 和 styleObject 语法。举例说明： ``` <template>  <view class="container" :class="computedClassStr"></view> <view class="container" :class="{active: isActive}"></view>  <view class="container" :class="computedClassObject"></view> </template> <script> export default { data () { return { isActive: true } }, computed: { computedClassStr () { return this.isActive ? 'active' : '' }, computedClassObject () { return { active: this.isActive } } } } </script> ```