页面样式与布局

熟悉基础知识,掌握Flex布局,了解动态修改样式、引入less预编译的方法

通过本节,你将学会:

  • 盒模型
  • 长度单位
  • 设置样式
  • 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是相对于项目配置基准宽度的单位,已经适配了移动端屏幕,其原理类似于rem

开发者只需按照设计稿确定框架样式中的px值即可。设计稿1px框架样式1px转换公式如下:

设计稿1px / 设计稿基准宽度 = 框架样式1px / 项目配置基准宽度

项目配置基准宽度:项目的配置文件(<ProjectName>/src/manifest.json)中config.designWidth的值,默认为750

示例如下:

若设计稿宽度为640px,元素A在设计稿上的宽度为100px,实现的两种方案如下:

方案一:

修改项目配置基准宽度:将项目配置基准宽度设置为设计稿基准宽度,则框架样式1px等于设计稿1px

  • 设置项目配置基准宽度,在项目的配置文件(<ProjectName>/src/manifest.json)中,修改config.designWidth
{
  "config": {
    "designWidth": 640
  }
}
  • 设置元素A对应的框架样式:
width: 100px;

方案二:

不修改项目配置基准宽度:若当前项目配置的项目配置基准宽度为750,设元素A的框架样式xpx,由转换公式得:100 / 640 = x / 750

  • 设置元素A对应的框架样式:
width: 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: #00FF00;
  }
  /* ID选择器 */
  #title {
    color: #00A000;
  }
  /* 并列选择 */
  .title, #title {
    font-weight: bold;
  }
  /* 后代选择器 */
  .tutorial-page text {
    font-size: 42px;
  }
  /* 直接后代选择器 */
  .tutorial-page > text {
    text-decoration: underline;
  }
</style>

Flex布局示例

框架使用Flex布局,关于Flex布局可以参考外部文档A Complete Guide to Flexbox等,这里不做过多讲解

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-grow: 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;">
    <!-- 修改class -->
    <text class="normal-text {{className}}" onclick="changeClassName">点击我修改文字颜色</text>
    <!-- 修改内联style -->
    <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.js中文文档等,这里不做过多讲解

使用less请先安装相应的类库:lessless-loader,详见文档style样式 --> 样式预编译;然后在<style>标签上添加属性lang="less"

示例如下:

<template>
  <div class="tutorial-page">
    <text id="title">less示例!</text>
  </div>
</template>

<style lang="less">
  /* 引入外部less文件 */
  @import './style.less';
  /* 使用less */
  .tutorial-page {
    justify-content: center;
    background-color: #00beaf;

    #title {
      color: #FF0000;
    }
  }
</style>

总结

了解页面的样式与布局后,开发者就可以着手设计开发页面了

条匹配 "" 的结果

    没有搜索到与 "" 相关的内容