0608 微信小程序 (button组件 + 事件及变量传递,icon组件)

1.button组件是一个按钮组件

<button type="type" size="size" color="color" bindtap="点击后执行的方法名(需要写在当前页对应的js文件中) data-hi="50" > 按钮字样</button> //data-hi 为自定义交互变量,对其设置了一个50的变量

button包含属性较多.主要的说两个

1.1 type:按钮样式 default / warn/ primary (默认/红色警告/绿色主按钮)

1.2 size:尺寸 default/mini (默认或最小,默认会满屏幕宽度)

1.3 disabled true/false 是否禁用当前按钮

button属性较多,详情移步

2.就着button说一下事件

本利事件说明:在任何组件可以绑定事件,本组件说明时至是打个比方

组件绑定事件的方式为标签描述中增加 bindtap="zhixing" //"zhixin为当前点击后要执行的方法名"

在当前页的js文件中增加如下代码

zhixing:function(e){ //e为当前所点击组件对象,e对象自带了组件全部信息在里面,可以传递到当前方法中做爱做的调用

//以下三行为读取交互变量值

console.log(e.currentTarget.(所包含属性)) //即可调用

console.log(e.(所包含属性) //读取全部信息或指定属性值

console.log(e.currentTarget.dataset.hi //读取当前组件的dataset属性下一个叫hi的自定义属性值

//以下为改变和设置交互变量值的步骤

首用parmar对象进行值的修改: parmar.data.zhi ="123" //zhi为在当前页的data里面定义的页面绑定变量,此时修改后只是内存修改,页面并不会同步刷新绑定值变化

然后用setData方法见刷新: this.setData(parmar.data) //setData方法执行后,即可进行显示刷新

}

3 ico组件:该组件可以调用微信系统自带的9个图标样式.该组件自带三个属性,属性值配置如下

3.1 type :为按钮样式,只能是这些:"

"'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'

3.2 size:可以设置图标大小:只能是数值

3.3 color:为图标颜色可以为css描述方式标记颜色如"red","yellow"等,或者是"reb(255,255,255)"来表示,替换图标颜色

0608 微信小程序 (button组件 + 事件 及变量传递,icon组件)