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

Posted 2020-11-14 xfym888

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