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

Posted xfym888

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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)"来表示,替换图标颜色 

 

以上是关于0608 微信小程序 (button组件 + 事件 及变量传递,icon组件)的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序 button 组件

微信小程序组件button

微信小程序 按钮 button 组件

微信小程序组件解读和分析:七button按钮

第九篇微信小程序-button组件

微信小程序按钮