事件对象可以携带额外信息,如 id, dataset, touches。
BaseEvent 基础事件对象属性列表:
dataset
在组件节点中可以附加一些自定义数据。这样,在事件中可以获取这些自定义的节点数据,用于事件的逻辑处理。
在 WXML 中,这些自定义数据以 data-
开头,多个单词由连字符 -
连接。
CustomEvent 自定义事件对象属性列表(继承 BaseEvent):
detail
自定义事件所携带的数据,如表单组件的提交事件会携带用户的输入,媒体的错误事件会携带错误信息,详见组件定义中各个事件的定义。
点击事件的detail
带有的 x, y 同 pageX, pageY 代表距离文档左上角的距离。
<switch checked="{{indicatorDots}}" bindchange="changeProperty" data-property-name="indicatorDots" />
changeProperty: function (event) {
var propertyName = event.currentTarget.dataset.propertyName
var newData = {}
newData[propertyName] = event.detail.value
this.setData(newData)
}
相当于
<switch checked="{{indicatorDots}}" bindchange="changeIndicatorDots" data-property-name="indicatorDots" />
changeIndicatorDots: function (e) {
this.setData({
indicatorDots: !this.data.indicatorDots
})
}
不过,前者更加通用
Page.prototype.setData(Object data, Function callback)
setData
函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data
的值(同步)
Object
以 key: value
的形式表示,将 this.data
中的 key
对应的值改变成 value
- 直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的,还会造成数据不一致。
- 仅支持设置可 JSON 化的数据。
- 单次设置的数据不能超过1024kB,请尽量避免一次设置过多的数据。
- 请不要把 data 中任何一项的 value 设为
undefined
,否则这一项将不被设置并可能遗留一些潜在问题。
wxss
rpx(responsive pixel): 可以根据屏幕宽度进行自适应。
使用@import
语句可以导入外联样式表,@import
后跟需要导入的外联样式表的相对路径,用;
表示语句结束。
@import "./weui.wxss";
内联样式
框架组件上支持使用 style、class 属性来控制组件的样式。
- style:静态的样式统一写到 class 中。style 接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进 style 中,以免影响渲染速度。
<view style="color:{{color}};" />
- class:用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上
.
,样式类名之间用空格分隔。
<view class="normal_view" />