Weex学习第五篇：css样式和类的运用

复习上篇文章学习的数据绑定，感觉比较重要的是

1.计算属性的的使用，类似响应式编程，就是一个变量的值会随着它相关的那个变量的值的变化而变化，不需要去update，比如fullName = firstName+lastName，一个text=fullName，如果firstName变化，那么fullName就会变。

2.if & repeat使用，if判断这个标签是否显示隐藏，repeat用在数组中生成表格数据类似的场景使用

本次要学习的是css样式和class使用,内联事件处理函数

重点，多个class名使用，在个个类名之间用空格分开 像这样class="title highlight"

在class里也可以使用变量来代替 像这样class="large {{textClass}}"

下面来看一下具体官方教程使用

CSS 样式和类

基础语法

CSS 样式可以理解为一系列的键值对，其中的每一对描述了一个特定的样式，例如组件的宽或者高。

width: 400; height: 50; ...

键值对的形式是 prop-name: prop-value;。键名是 prop-name，键值是 prop-value。 一般情况下，键名按照连接符的方式进行命名，键和值之间由冒号 : 进行分隔，每对键值之间由分号 ; 进行分隔。

在 Weex 页面上样式有两种形式：

• <template> 中的 style 特性
• <style> 样式表

<template> 中的 style 特性

在 style 特性中编写样式，例如：

<template>  <div style="width: 400; height: 50;">    ...  </div></template>

这段代码的意思是 <div> 组件的宽和高分别为 400 像素和 50 像素。

<style> 样式表

例如:

<style>  .wrapper { width: 600; }  .title { width: 400; height: 50; }  .highlight { color: #ff0000; }</style>

样式表包含了多个样式规则，每条规则有一个对应的类，以及由 {...} 包括的若干条样式。例如：

.title { width: 400; height: 50; }

class 特性

<template> 标签中的 class 特性值用来匹配 <style> 样式表中的一个或多个 class 名，多个 class name 之间由空格分隔。例如：

<template>  <div class="wrapper">    <text class="title">...</text>    <text class="title highlight">...</text>  </div></template><style>  .wrapper { width: 600; }  .title { width: 400; height: 50; }  .highlight { color: #ff0000; }</style>

体验一下

这段代码的含义是 <div> 组件的宽度是 600 像素，两个 <text> 组件的尺寸为 400x50，其中第二个文本组件是红色字。

注意事项

• 为了简化页面设计和实现，屏幕的宽度统一为 750 像素，不同设备屏幕都会按照比例转化为这一尺寸进行长度计算。
• 标准 CSS 支持很多样式选择器，但 Weex 目前只支持单个 class name 的选择器。
• 标准 CSS 支持很多的长度单位，但 Weex 目前只支持像素，并且 px 单位可以忽略不写，直接使用对应的数值。更多详情请查看通用样式。
• 子元素的样式不会继承自父元素，这一点与标准 CSS 不同，比如 color 和 font-size 等样式作用在 <text> 上层的 <div> 上是无效的。
• 标准 CSS 包含了非常多的样式属性，但 Weex 只支持了其中的一部分，比如盒模型、flexbox、position 等布局属性，以及 font-size、color 等其它样式。

与数据绑定结合

请查阅数据绑定中有关 style 和 class 特性的相关部分。这里简单举个例子：

<template>  <div>    <text style="font-size: {{fontSize}};">Alibaba</text>    <text class="large {{textClass}}">Weex Team</text>  </div></template><style>  .large {font-size: 32;}  .highlight {color: #ff0000;}</style><script>  module.exports = {    data: {      fontSize: 32,      textClass: 'highlight'    }  }</script>

体验一下

今天看到一个特殊的内联事件处理参数，$event 是默认的事件处理函数的第一个参数，这个参数包含三个属性type，target，timestamp。这个属性是固定存在的，格式也是固定的就是通过$event这样传的。看一下具体用法：

事件处理

Weex 允许对 <template> 中的元素绑定事件处理函数。

基本语法

以 on... 开头的就是用于绑定事件的特性，特性名中 on 之后的部分就是事件的类型，特性的值就是处理该事件的函数名。函数名外不需要添加 mustache 语法中的大括号。例如：

<template>  <div>    <text onclick="toggle">Toggle: {{result}}</text>  </div></template><script>  module.exports = {    data: {      result: true    },    methods: {      toggle: function () {        this.result = !this.result      }    }  }</script>

体验一下

内联事件处理参数

同时我们也支持在事件绑定的特性值中内联写明被传入的参数。例如：

<template>  <div>    <text onclick="update(1, 2)">Result: {{result}}</text>  </div></template><script>  module.exports = {    data: {      result: '<empty>'    },    methods: {      update: function (x, y) {        this.result = x + y      }    }  }</script>

体验一下

特殊的内联事件处理参数

额外的，在这种内联的事件绑定写法中，你可以使用一个特殊的参数 $event，代表事件描述对象，即默认事件处理函数的第一个参数。所以 <template> 中的 onclick="foo" 和 onclick="foo($event)" 是等价的，$event 的用法可以更多参考下面的例子

<template>  <div>    <text onclick="update($event, 1, 2)">Result: {{result}}</text>  </div></template><script>  module.exports = {    data: {      result: '<empty>'    },    methods: {      update: function (e, x, y) {        this.result = e.type + (x + y)      }    }  }</script>

体验一下

事件描述对象

每当一次事件被触发的时候，都会产生一个事件描述对象，该对象会默认作为第一个参数传递给事件处理函数，或以 $event 形参的方式出现在内联事件处理函数中。

每个事件描述对象至少包含以下几个特性：

• type (string): 事件名称, 如: click
• target (Element): 目标元素
• timestamp (number): 事件触发时的时间戳数字

参考链接：https://weex-project.io/cn/doc/syntax/display-logic.html