189 8069 5689

微信小程序Button组件详解及简单实例

微信小程序 Button

“专业、务实、高效、创新、把客户的事当成自己的事”是我们每一个人一直以来坚持追求的企业文化。 创新互联是您可以信赖的网站建设服务商、专业的互联网服务提供商! 专注于网站设计、成都网站制作、软件开发、设计服务业务。我们始终坚持以客户需求为导向,结合用户体验与视觉传达,提供有针对性的项目解决方案,提供专业性的建议,创新互联建站将不断地超越自我,追逐市场,引领市场!

相关文章:

微信小程序 Button

微信小程序 radio

微信小程序 slider

微信小程序 switch

微信小程序 textarea

微信小程序 picker-view

微信小程序 picker

微信小程序 label

微信小程序 input 

微信小程序 form

微信小程序 checkbox

实现实例效果图:

微信小程序 Button 组件详解及简单实例

属性名类型默认值说明
sizeStringdefault有效值default, mini
typeStringdefault按钮的样式类型,有效值primary, default, warn
plainBooleanfalse按钮是否镂空,背景色透明
disabledBooleanfalse是否禁用
loadingBooleanfalse名称前是否带 loading 图标
formTypeString有效值:submit, reset,用于form组件,点击分别会触发submit/reset事件
hover-classStringbutton-hover指定按钮按下去的样式类。当hover-class="none"时,没有点击态效果

注:button-hover默认为{background-color:rgba(0,0,0,0.1);opacity:0.7;}

示例代码:

/** wxss **/
/** 修改button默认的点击态样式类**/
.button-hover{
 background-color:red;
}
/** 添加自定义button点击态样式类**/
.other-button-hover{
 background-color:blur;
}






var types = ['default', 'primary', 'warn']
var pageObject = {
 data: {
 defaultSize: 'default',
 primarySize: 'default',
 warnSize: 'default',
 disabled: false,
 plain: false,
 loading: false
 },
 setDisabled: function(e) {
 this.setData({
 disabled: !this.data.disabled
 })
 },
 setPlain: function(e) {
 this.setData({
 plain: !this.data.plain
 })
 },
 setLoading: function(e) {
 this.setData({
 loading: !this.data.loading
 })
 }
}

for (var i = 0; i < types.length; ++i) {
 (function(type) {
 pageObject[type] = function(e) {
 var key = type + 'Size'
 var changedData = {}
 changedData[key] =
 this.data[key] === 'default' ? 'mini' : 'default'
 this.setData(changedData)
 }
 })(types[i])
}

Page(pageObject)

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!


标题名称:微信小程序Button组件详解及简单实例
分享URL:http://cdxtjz.cn/article/pipoge.html

其他资讯