快应用页面样式与布局
在课程的大纲
- 盒模型
- 长度单位
- 设置样式
- Flex布局示例
- 动态修改样式
- 引入less预编译
盒模型
框架使用border-box模型，暂不支持content-box模型与box-sizing属性
布局所占宽度Width:
width = width(包含padding-left+ padding-right +border-left + border-right)
布局所占宽度Height:
Height = height(包含padding-top + padding-bottom +border-top + border-bottom)
长度单位
框架目前仅支持长度单位 px 和 %。与传统web页面不同，px是相对于项目配置基准宽度的单位。
设计稿1px / 设计稿基准宽度 = 框架样式1px / 项目配置基准宽度
项目配置基准宽度：项目的配置文件（<ProjectName>/src/mainfest.json）中config.designWidth的值，默认为750
若设计宽度为640px,元素A在设计稿的宽度为100px，实现的两种方案如下：
1.框架样式1px 等于 设计稿1px
修改<ProjectName>/src/mainfest.json中，修改config.designWidth:
{
"config": {
"designWidth": 640
}
}
2.不修改项目配置基准宽度：若当前项目配置的 基准宽度为 750，
设计稿宽度100px,在框架为 100 / 640 = x / 750 推出：x = 117
在框架宽度为：117px
设置样式
开发可以使用 内联样式、tag选择器、class选择器、id选择器来为组件设置样式
同时也可以使用 并列选择、后代选择器设置样式
<template>
<div class="tutorial-page">
<text style="color: #FF0000;">内联样式</text>
<text id="title">ID选择器</text>
<text class="title">class选择器</text>
<text>tag选择器</text>
</div>
</template>
<style>
.tutorial-page {
flex-direction:column;
}
/* tag选择器 */
text {
color: #0000FF;
}
/* class 选择器（推荐）*/
.title {
color: #00FFOO;
}
/* ID选择器 */
#title {
color: #00A000;
}
/* 并列选择 */
#title,.title {
font-weight:bold;
}
/* 后代选择 */
.tutorial-page text {
font-size: 42px;
}
/* 直接后代选择器 */
.tutorial-page > text {
text-decoration:underline;
}
</style>
Flex布局示例
框架使用Flex 布局，div作为Flex容器组件，具有Flex布局的特性；text、a、span、label组件为文本容器组件，其它组件不能直接放置文本内容。
<template>
<div class="tutorial-page">
<div class="item">
<text>item1</text>
</div>
<div class="item">
<text>item2</text>
</div>
</div>
</template>
<style>
.tutorial-page {
/* 交叉轴居中*/
align-items:center;
/* 纵向排列*/
flex-direction:column;
}
.tutorial-page >.item {
/* 空间足够时，允许压缩*/
/* flex-shrink:1;*/
/* 空间不足时，不允许压缩*/
flex-shrink:0;
/*主轴居中*/
justify-content:center;
width: 200px;
height: 100px;
margin:10px;
background-color: #FF0000;
}
</style>
动态修改样式
动态修改样式有多种方式。与传统前端开发习惯一致，包括但不限于以下两种：
- 修改class: 更新组件的class属性中使用的变量的值
- 修改内联style:更新组件的style属性中的某个CSS的值
<template>
<div style="flex-direction: column;">
<text class="normal-text {{className}}" onclick="changeClassName">点击我修改文字颜色</text>
<text style="color:{{textColor}}" onclick="changeInlineStyle">点击我修改文字颜色</text>
</div>
</template>
<style>
.normal-text {
font-weight:bold;
}
.text-blue {
color: #0FAEFF;
}
.text-red {
color: #F76160;
}
</style>
<script>
export default {
private: {
className: 'text-blue',
textColor: #0FAEFF
},
onInit() {
this.$page.setTitleBar({text: '动态修改样式'})
},
changeClassName() {
this.className = 'text-red'
},
changeInlineStyle() {
this.textColor = '#F76160'
}
}
</script>
引入less预编译
首先要安装相关库的：less、less-loader
在终端用命令：
sudo npm install -g less
sudo npm install -g less-loader
安装成功后，可以用lessc -v查看版本号
使用外部的less style 示例如下：
<template>
<div class="tutorial-page">
<text id="title">less示例</text>
</div>
</template>
<style lang="less">
/*引入外部less文件*/
@import './style.less';
.tutorial-page {
/*主轴居中*/
justify-content: center;
background-color: #00BEAF;
#title {
color: #FF0000;
}
}
</style>
