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

微信小程序 Button

相关文章：

微信小程序 Button

微信小程序 radio

微信小程序 slider

微信小程序 switch

微信小程序 textarea

微信小程序 picker-view

微信小程序 picker

微信小程序 label

微信小程序 input 

微信小程序 form

微信小程序 checkbox

实现实例效果图：

属性名	类型	默认值	说明
size	String	default	有效值default, mini
type	String	default	按钮的样式类型，有效值primary, default, warn
plain	Boolean	false	按钮是否镂空，背景色透明
disabled	Boolean	false	是否禁用
loading	Boolean	false	名称前是否带 loading 图标
formType	String	无	有效值：submit, reset，用于form组件，点击分别会触发submit/reset事件
hover-class	String	button-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;
}
<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}}" bindtap="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 bindtap="setLoading">点击设置以上按钮loading属性</button>
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  # 组件  # 详解  # Button实例  # 微信小程序 radio单选框组件详解及实例代码  # 微信小程序picker组件下拉框选择input输入框的实例  # 微信小程序 倒计时组件实现代码  # 微信小程序 swiper组件轮播图详解及实例  # 详解如何在微信小程序开发中正确的使用vant ui组件  # 微信小程序（十）swiper组件详细介绍  # 微信小程序（十四）button组件详细介绍  # 微信小程序实现图片预加载组件  # 微信小程序 Image组件实例详解  # 微信小程序开发之组件设计规范  # 有效值  # 相关文章  # 希望能  # 自定义  # 按下  # 谢谢大家  # 默认值  # 背景色  # 默认为  # td  # String  # size  # thead  # type  # tbody  # tr  # default  # plain  # warn  # false 

相关文章： 实惠建站价格推荐：2025年高性价比自助建站套餐解析  建站中国官网：模板定制+SEO优化+建站流程一站式指南  如何基于PHP生成高效IDC网络公司建站源码？  北京营销型网站制作公司,可以用python做一个营销推广网站吗？  宝塔建站助手安装配置与建站模板使用全流程解析  内网网站制作软件,内网的网站如何发布到外网？  定制建站如何定义？其核心优势是什么？  网站设计制作公司地址,网站建设比较好的公司都有哪些？  如何选择可靠的免备案建站服务器？  建站之星代理如何获取技术支持？  移动端手机网站制作软件,掌上时代，移动端网站的谷歌SEO该如何做？  logo在线制作免费网站在线制作好吗,DW网页制作时，如何在网页标题前加上logo？  成都响应式网站开发,dw怎么把手机适应页面变成网页？  如何注册花生壳免费域名并搭建个人网站？  网站图片在线制作软件,怎么在图片上做链接？  如何快速重置建站主机并恢复默认配置？  道歉网站制作流程,世纪佳缘致歉小吴事件，相亲网站身份信息伪造该如何稽查？  韩国网站服务器搭建指南：VPS选购、域名解析与DNS配置推荐  mc皮肤壁纸制作器,苹果平板怎么设置自己想要的壁纸我的世界？  如何通过IIS搭建网站并配置访问权限？  网站制作与设计教程,如何制作一个企业网站，建设网站的基本步骤有哪些？  济南专业网站制作公司,济南信息工程学校怎么样？  建站之星如何实现PC+手机+微信网站五合一建站？  如何快速上传建站程序避免常见错误？  制作充值网站的软件,做人力招聘为什么要自己交端口钱？  存储型VPS适合搭建中小型网站吗？  建站之星安装模板失败：服务器环境不兼容？  建站之星2.7模板快速切换与批量管理功能操作指南  如何在IIS中配置站点IP、端口及主机头？  如何通过VPS建站无需域名直接访问？  为什么Go需要go mod文件_Go go mod文件作用说明  官网自助建站平台指南：在线制作、快速建站与模板选择全解析  网站广告牌制作方法,街上的广告牌，横幅，用PS还是其他软件做的？  怎么用手机制作网站链接,dw怎么把手机适应页面变成网页？  深圳企业网站制作设计,在深圳如何网上全流程注册公司？  非常酷的网站设计制作软件,酷培ai教育官方网站？  视频网站制作教程,怎么样制作优酷网的小视频？  ,制作一个手机app网站要多少钱？  ,柠檬视频怎样兑换vip？  如何选择适合PHP云建站的开源框架？  三星网站视频制作教程下载,三星w23网页如何全屏？  中山网站推广排名,中山信息港登录入口？  广州网站设计制作一条龙,广州巨网网络科技有限公司是干什么的？  如何快速生成高效建站系统源代码？  如何在云主机上快速搭建网站？  如何选择适配移动端的WAP自助建站平台？  建站主机选择指南：服务器配置与SEO优化实战技巧  金*站制作公司有哪些,金华教育集团官网？  建站之星如何助力企业快速打造五合一网站？  小型网站制作HTML,*游戏网站怎么搭建？