按钮组件(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。
效果为 按钮大小 颜色 变化等效果。。。