微信小程序--快速开发UI界面2：认识button组件

按钮组件(button),通常有size, type, plain, disabled, loading等几个。
以下示例：
在app.json中添加button到pages数组中，

{ 
 "pages":[   
 "pages/button/button",   
 "pages/index/index",   
 "pages/logs/logs"   
       ], 
        "window":{  
        "backgroundTextStyle":"light",  
        "navigationBarBackgroundColor": "#fff",  
        "navigationBarTitleText": "WeChat",   
        "navigationBarTextStyle":"black" 
                }
          

  }

将button添加到pages数组的第一页，这样调试代码将显示该页面。
在button.wxml文件，写如下代码：

< view class="container">
< button type="default" size="{{defaultSize}}" loading="{{loading}}"
plain="{{plain}}" disabled="{{disabled}}" 
bindtap="default" hover-class="other-button-hover">default   
< /button>

< button type="primary" size="{{primarySize}}" 
loading="{{loading}}"plain="{{plain}}"
 disabled="{{disabled}}" bindteap="primary">primary < /button>

< button type="warn" size="{{warnSize}}" 
loading="{{loading}}"plain="{{plain}}"
 disabled="{{disabled}}" bindtap="warn">warn< /button>

< button bindtap="setDisabled">点击设置以上按钮disabled属性< /button>
< button bindtap="setPlain">点击设置以上按钮plain属性< /button> 

< button loading="setLoading">点击设置以上按钮loading属性< /button>
< /view>

外层的view组件定义一个容器，在容器内放置了6个button组件，
前三个分别设置了type, size, loading, plain, disabled, bindtap和hover-class属性。
按钮的type属性有三类，以不同的背景来区分，default为灰色，primary绿色，warn红色。
size属性只有2个值：default和mini，其中mini按钮的高度减少一些。
plain属性设置按钮是否镂空，即背景是否为透明。
loading属性设置是否在按钮文字前显示一个loading动画图标。

由于app.wxss的container类控制样式，按钮水平、垂直居中，按钮的宽度以显示文字长度为限，希望container按钮的大小一致，并向上对齐，按钮间有合适的间距，需要编写当前也买你的wxss文件button.wxss。

container类重新进行定义，设置对齐方式、内间距和外间距。

.container{
align-items: flex-start;
justify-content: flex-start;
padding: 0;
margin: 10rpx;
}

.container button{ 
 width: 95%; 
  margin: 10rpx;
  }

在button.wxml中，按钮的很多属性都使用了动态数据绑定，
这就是要求在button.js中准备这些数据绑定变量，为其设置初始值。
同时，还在按钮的bindtap属性中绑定了事件，也需要在button.js中绑定了事件，也需要在button.js中编写相应的事件处理函数。

Page({                   /**   * 页面的初始数据   */ 

   data: {    
  defaultSize:'default',   //default按钮的初始大小  
  primarySize: 'default',   //primary按钮的初始大小 
  warnSize: 'default',        //warn按钮的初始大小   
  disabled: false,             //按键初始禁用状态  
  plain: false,           
          //按键初始镂空用状态    
             loading: false          
                 //按键初始显示loading图标状态
  },
  
  //设置disabled变量的值 
   setDisabled:function(e){   
    this.setData({   
       disabled:!this.data.disabled   
          }) 
           },
  //设置plain变量的值 
   setPlain:function(e){   
    this.setData({    
      plain:!this.data.plain  
          })
            }, 
             //设置loading变量的值
             
setLoading:function(e){
  this.setData({   
   loading:!this.data.loading 
    })
    },
//default按钮触发事件处理函数
default:function(e){  
var d=this.data.primarySize === 'default'?'mini':'default';
  this.setData({  
    defaultSize: d        //切换primarySize的值 
     })
     },
     //warn按钮触按事件处理函数
     warn:function(e){  
     var d=this.data.warnSize  === 'default'?'mini':'default'; 
      this.setData({    
      warnSize: d       //切换warnSize的值 
       })
       }
       
   })

首先定义了控制default、primary、warn按钮的初始值大小属性值，然后定义了控制按钮的各种状态loading、plain、disabled的初始值。

接着定义setDisabled、setPlain、setLoading 3个函数，用来处理3个按钮的触按事件分别将对应的变量值去反，这三个变量通过动态数据绑定到前面3个按钮的对应属性上，从而可控制按钮属性值动态变化。

最后定义了default、primary、warn这3个函数，处理3个按钮的触按事件，分别切换对应按钮的size为default或mini。

在这里插入图片描述

效果为按钮大小颜色变化等效果。。。

微信小程序--快速开发UI界面2：认识button组件

猜你喜欢