【Taro】事件处理&样式表

事件处理

• Taro 事件采用驼峰命名（与小程序不一致，小程序是小写）
• 在 Taro 中阻止事件冒泡，必须明确使用 stopPropagation。
• process.env.TARO_ENV === 'weapp' 判断当前运行的环境（开发）: h5、weapp等，根据不同环境拉取不同样式或者接口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

/**
 * 注意: 
 * 传入参数: this.onHandleClick.bind(this, 'name', '1'), this 后面添加参数
 * 但是接收参数时 this 是最后那个参数
 */  
onHandleClick (name, id, event) {
  console.log(arguments)          // 输出 ["name", "1", MouseEvent]
  event.stopPropagation();
}

render () {
  return (
    <View className='index'>
      <Button onClick={this.onHandleClick.bind(this, 'name', '1')}>事件</Button>
    </View>
  )
}

向事件处理程序传递参数

• 向事件处理程序传递参数
• 任何组件的事件传递都要以 on 开头
• 只要当 JSX 组件传入的参数是函数，参数名不需要以 on 开头
  （这些功能主要微课适配小程序，只做 H5 不需要关注）

样式表

• 支持 less、sass
• 不同文件夹下的样式文件不能重名，会导致编译错误
• 小程序中自定义组件，只对当前组件有效（不同组件都设置了.img）
• 必须定义 classname，用类选择器；id、标签选择器、属性选择器等不支持
• 尽量使用 flex 布局， 各平台差距不大
• 单位如果不要转化就要大写 PX, 不然会转化成 rem

1
2
3
4
5
6
7
8
9
10

#id {}                          // 错误         id
div span {}                     // 错误         标签选择器
span[class='name']{}            // 错误         属性选择器
.a > .b {}                      // 不一定生效    

// 正确， 类选择器 必须定义classname
.img {          
  width: 100px;
  height: 100px; 
}

• Previous Post →
• ← Next Post

赏 支付宝打赏 微信打赏

欣赏此文，打赏一下