style 样式

      更新时间：

      用于描述 template 模板的组件样式，决定组件应该如何显示

      样式布局采用 CSS Flexbox（弹性盒）样式，针对部分原生组件，对 CSS 进行了少量的扩充以及修改

      为了解决屏幕适配问题，所有与大小相关的样式（例如 width、font-size）均以基准宽度（默认 750px）为基础，根据实际屏幕宽度进行缩放

      文件导入

      支持@import导入外部文件

      <style>
  @import './style.css';
  .a {
  }
</style>
      复制代码

      模板内部样式

      支持使用 style、class 属性来控制组件的样式

      <!-- 内联inline -->
<div style="color: #f00; margin: 10px;" />
<!-- class声明 -->
<div class="normal append" />
      复制代码

      伪类

      css 伪类是选择器中的关键字，用于指定要选择元素的特殊状态。

      名称 支持组件 描述
      :active 通用 表示被用户激活的元素，如：被用户按下的按钮。

      选择器

      支持的选择器有：

      选择器 样例 样例描述
      .class .intro 选择所有拥有 class="intro" 的组件
      #id #firstname 选择拥有 id="firstname" 的组件
      tag div 选择所有 div 组件
      , .a, .b 选择所有 class=“.a” 以及 class=“.b”的组件
      #id .class tag .page .body text 支持 id,class,tag 的后代选择器，也可以使用">"表示直接后代 
      <style>
  /* 单个选择器 */
  text {
  }
  .class-abc {
  }
  #idAbc {
  }
  /* 后代选择 */
  .doc-page #testTag div text {
  }
  .doc-page #test-class .class1 {
  }
  .doc-page #testId #testIdId1 {
  }
  /* 直接后代选择 */
  .doc-page #testTag .flex-column > text {
  }
  /* 同一样式适应多个选择器 */
  .font-text,
  .font-comma {
  }
</style>
      复制代码

      注意，选择器声明的变化可能会导致元素重新绘制。为了减少选择器变化引起的 DOM 更新数量，当前只支持：CSS 声明的多个选择器中最后一个规则的变更对 DOM 的更新

      <template>
  <div class="{{docBody}}">
    <text class="{{rowDesc}}">描述内容</text>
  </div>
</template>

<style>
  .doc-body .row-desc1 {
    color: #ff0000;
  }
  .doc-body .row-desc2 {
    color: #0000ff;
  }
  .doc-body2 .row-desc1 {
    color: #00ff00;
  }
</style>

<script>
  export default {
    // 页面级组件的数据模型
    data: {
      rowDesc: 'row-desc1',
      docBody: 'doc-body',
    },
  }
</script>
      复制代码

      以上的代码示例，当我们把rowDesc变量从row-desc1变为row-desc2时是通知 Native 更新节点样式，但是如果把docBody变量从doc-body变为doc-body2，是不会通知 DOM 更新的。

      因为doc-body不是最后一个选择器，非末尾的选择器变更有可能影响很多 DOM 元素，从而影响到渲染性能

      选择器优先级

      当前样式的选择器的优先级计算保持与浏览器一致，是浏览器 CSS 渲染的一个子集（仅支持：inline, id, class, tag, 后代，直接后代）

      多条 CSS 声明可以匹配到同一个元素 如 div，应用在该元素上的 CSS 声明总体优先级是：inline > #id > .class > tag，这四大类匹配到该元素的多个 CSS 声明，如：#page .class-div和.page .class-div，其优先级按照各选择器的权值高低之和来比较

      • ID选择器（例如: #hello）的权值为 10000

      • 类选择器（例如: .example）的权值为 100

      • 类型选择器（例如: h1）的权值为 1

      css 的优先级计算文档也可以查看 MDN 文档 入门

      那么以下 CSS 声明计算的权值为：

      • #page的权值为：10000

      • #page .class-div的权值为：10100

      • #page .class-div text的权值为 10101

      • #page #body .container div text的权值为：20102

      因此：

      • #page .class-div和.page .class-div比较，权值不一样，权值高优先级高；如果权值相同，则按照声明顺序：后者覆盖前者

      样式预编译

      目前蓝河应用支持less与sass的预编译，具体教程也可以参考[这里]

      <!--导入外部文件, 代替style内部样式-->
<style lang="less" src="./lessFile.less"></style>

<!--合并外部文件-->
<style lang="less">
  @import './lessFile.less';
  .page-less {
    #testTag {
      .less-font-text,
      .less-font-comma {
        font-size: 60px;
      }
    }
  }
</style>
      复制代码

      媒体查询

      媒体查询（Media Query）在移动设备上应用十分广泛，开发者经常需要根据设备的大致类型或者特定的特征和设备参数（例如屏幕分辨率）来修改应用的样式。为此媒体查询提供了如下功能：

      1.针对设备和应用的属性信息，可以设计出相匹配的布局样式。 2.当屏幕发生动态改变时（比如分屏、横竖屏切换），应用页面布局同步更新。

      CSS 语法规则

      使用@media 来引入查询语句，具体规则如下：

      @media [media-type] [and|not|only] [(media-feature)] {
  CSS-Code;
}
      复制代码

      举例：

      /* level3的写法, 表示：宽度小于30dp时生效 */
@media (max-width: 30) {  .box {
    background-color: red;
  }
}
/* level4的写法，比level3更清晰简洁，表示：宽度小于30dp时生效 */
@media (width <= 30) {  .box {
    background-color: red;
  }
}
/* 多条件写法，表示：宽度大于400dp且小于700dp时生效 */
@media screen and (min-width: 400) and (max-width: 700) {  .box {
    background-color: red;
  }
}
/* 多条件level4写法，表示：宽度大于400dp且小于700dp时生效  */
@media (400 <= width <= 700) {  .box {
    background-color: red;
  }
}
/* 多条件写法，表示：方表和手机上生效 */
@media screen and (device: watch-square) or screen and (device: phone) {  .box {
    background-color: red;
  }
}
      复制代码

      页面中引用资源

      通过@import 方式引入媒体查询，具体使用方法如下：

      @import url [media-type] [and|not|only] [(media-feature) ];
      复制代码

      例如：

      @import '../common/style.css' screen and (min-width: 600) and (max-width: 1200);
      复制代码

      动态修改样式

      动态修改样式有多种方式，包括但不限于以下：

      • 修改 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>
    <!-- 修改绑定的对象 -->
    <text style="{{ styleObj }}" onclick="changeStyleObj">点击我修改文字颜色</text>
    <!-- 修改绑定的样式字符串  -->
    <text style="{{ styleText }}" onclick="changeStyleText">点击我修改文字颜色</text>
  </div>
</template>

<style>
  .normal-text {
    font-weight: bold;
  }
  .text-blue {
    color: #0faeff;
  }
  .text-red {
    color: #f76160;
  }
</style>

<script>
  export default {
    data: {
      className: 'text-blue',
      textColor: '#0faeff',
      styleObj: {
        color: '#f00',
      },
      styleText: 'color: #0f0',
    },
    changeClassName() {
      this.className = 'text-red'
    },
    changeInlineStyle() {
      this.textColor = '#f76160'
    },
    changeStyleObj() {
      this.styleObj = {
        color: '#00f',
      }
    },
    changeStyleText() {
      this.styleText = 'color: #0f0'
    },
  }
</script>
      复制代码

      引入 less/scss 预编译

      less 篇

      less 语法入门请参考less 中文官网 学习

      使用 less 请先安装相应的类库：less、less-loader，

      npm i less less-loader
      复制代码

      在<style>标签上添加属性lang="less"

      <template>
  <div class="tutorial-page">
    <text id="title">less示例!</text>
  </div>
</template>
<style lang="less">
  /* 引入外部less文件 */
  @import './style.less';
  /* 使用less */
</style>
      复制代码

      scss 篇

      scss 语法入门请参考 [scss 中文官网]学习

      使用 scss 请在蓝河应用项目下执行以下命令安装相应的类库：node-sass、sass-loader，

      npm i node-sass sass-loader
      复制代码

      在<style>标签上添加属性lang="scss" 示例如下：

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

<style lang="scss">
  /* 引入外部scss文件 */
  @import './style.scss';
  /* 使用scss */
</style>
      复制代码

      媒体类型

      类型 说明
      screen 按屏幕相关参数进行媒体查询。

      媒体逻辑操作

      开发者可以使用逻辑操作符组合多个媒体特性的查询条件，编写复杂的媒体查询。

      类型 说明
      and and 运算符用于将多个媒体特性组合到一个单独的媒体查询中，要求每个链接的特性返回 true，则此时查询为真。
      not not 运算符用于否定媒体查询，如果查询不返回 false，则返回 true。如果出现在逗号分隔的列表中，它只会否定应用它的特定查询。如果使用 not 运算符，则必须指定显式媒体类型。例如：not screen and (min-width: 400) and (max-width: 700)注：not 关键字不能用于否定单个功能表达式，它会作用于整个媒体查询。
      only only 运算符仅用于整个查询匹配应用样式,蓝河应用处理以 only 开头的关键词时将会忽略 only。如果使用 only 运算符，必须指定媒体类型。例如：only screen and (min-width: 400) and (max-width: 700)
      ,(逗号) 逗号分隔效果等同于 or 逻辑操作符。当使用逗号分隔的媒体查询时，如果任何一个媒体查询返回真，样式就是有效的。例如：(orientation: landscape), (height >= 690)。
      or or 运算符用于将多个媒体特性比较语句组合到一个媒体查询语句中，只要有其中一条媒体特性比较语句返回 true，查询成立。例如：(min-width: 400) or (max-width: 700)
      <= 小于等于。例如： (400 <= width)。
      >= 大于等于。例如： (500 >= height)。
      < 小于。例如： (400 < width)。
      > 大于。例如： (500 > height)。

      媒体特性

      类型 说明 查询时是否带单位 支持单位
      height 定义输出设备中的页面可视区域高度。 否 dp
      min-height 定义输出设备中的页面可视区域最小高度。 否 dp
      max-height 定义输出设备中的页面可视区域最大高度。 否 dp
      width 定义输出设备中的页面可视区域宽度。 否 dp
      min-width 定义输出设备中的页面可视区域最小宽度。 否 dp
      max-width 定义输出设备中的页面可视区域最大宽度。 否 dp
      orientation 定义屏幕处于横屏模式还是竖屏模式，支持属性：portrait（竖屏）、landscape（横屏）。 否 无
      aspect-ratio 定义输出设备中的页面可见区域宽高比，比例值需要按照 x / y 的格式，例如 1 / 2。 否 无
      min-aspect-ratio 定义输出设备中的页面可见区域最小宽高比，参数要求同上。 否 无
      max-aspect-ratio 定义输出设备中的页面可见区域最大宽高比，参数要求同上。 否 无
      device device 的可选值为:phone、watch、car、tv、pad、watch-square、watch-round，watch 默认 watch-square 否 无
      上一篇
      ux文件
      下一篇
      javascript代码
      以上内容对您是否有帮助？
      • 毫无帮助
      • 帮助不大
      • 一般
      • 很好
      • 非常好
      意见反馈