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属性较多,详情移步

? ? ? ?https://developers.weixin.qq.com/miniprogram/dev/component/button.html?

?

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)"来表示,替换图标颜色?