微信小程序 Button

相关文章：

微信小程序 Button

微信小程序 radio

微信小程序 slider

微信小程序 switch

微信小程序 textarea

微信小程序 picker-view

微信小程序 picker

微信小程序 label

微信小程序 input 

微信小程序 form

微信小程序 checkbox

实现实例效果图：

注：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 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 作用域操作符会触发自动加载吗_php类自动加载机制与::调用【教程】  Laravel Asset编译怎么配置_Laravel Vite前端构建工具使用  通义万相免费版怎么用_通义万相免费版使用方法详细指南【教程】  Angular 表单中正确绑定输入值以确保提交与验证正常工作  Laravel如何使用Vite进行前端资源打包？（配置示例）  北京网站制作费用多少,建立一个公司网站的费用.有哪些部分,分别要多少钱？  Laravel项目怎么部署到Linux_Laravel Nginx配置详解  如何用免费手机建站系统零基础打造专业网站？  Laravel如何实现邮箱地址验证功能_Laravel邮件验证流程与配置  Laravel如何使用Telescope进行调试？（安装和使用教程）  EditPlus中的正则表达式 实战(1)  齐河建站公司：营销型网站建设与SEO优化双核驱动策略  Laravel如何与Vue.js集成_Laravel + Vue前后端分离项目搭建指南  Win11搜索不到蓝牙耳机怎么办 Win11蓝牙驱动更新修复【详解】  Laravel如何使用Eloquent进行子查询  详解Android图表 MPAndroidChart折线图  Laravel如何实现多级无限分类_Laravel递归模型关联与树状数据输出【方法】  Laravel怎么实现前端Toast弹窗提示_Laravel Session闪存数据Flash传递给前端【方法】  电商网站制作多少钱一个,电子商务公司的网站制作费用计入什么科目？  消息称 OpenAI 正研发的神秘硬件设备或为智能笔，富士康代工  Laravel如何使用缓存系统提升性能_Laravel缓存驱动和应用优化方案  Laravel如何实现本地化和多语言支持？（i18n教程）  微信小程序 五星评分(包括半颗星评分)实例代码  Laravel Eloquent：优雅地将关联模型字段扁平化到主模型中  html5源代码发行怎么设置权限_访问权限控制方法与实践【指南】  合肥制作网站的公司有哪些,合肥聚美网络科技有限公司介绍？  Laravel事件和监听器如何实现_Laravel Events & Listeners解耦应用的实战教程  简单实现Android验证码  Laravel如何实现登录错误次数限制_Laravel自带LoginThrottles限流配置【方法】  Laravel怎么实现一对多关联查询_Laravel Eloquent模型关系定义与预加载【实战】  零基础网站服务器架设实战：轻量应用与域名解析配置指南  Laravel如何自定义分页视图？（Pagination示例）  如何在腾讯云免费申请建站？  Python文件流缓冲机制_IO性能解析【教程】  网站制作价目表怎么做,珍爱网婚介费用多少？  郑州企业网站制作公司,郑州招聘网站有哪些？  Laravel如何实现密码重置功能_Laravel密码找回与重置流程  Laravel如何保护应用免受CSRF攻击？（原理和示例）  个人摄影网站制作流程,摄影爱好者都去什么网站？  网站制作大概多少钱一个,做一个平台网站大概多少钱？  如何自定义safari浏览器工具栏？个性化设置safari浏览器界面教程【技巧】  bing浏览器学术搜索入口_bing学术文献检索地址  如何注册花生壳免费域名并搭建个人网站？  Laravel集合Collection怎么用_Laravel集合常用函数详解  百度输入法ai面板怎么关 百度输入法ai面板隐藏技巧  香港服务器如何优化才能显著提升网站加载速度？  Laravel如何实现RSS订阅源功能_Laravel动态生成网站XML格式订阅内容【教程】  如何为不同团队 ID 动态生成多个“认领值班”按钮  如何获取免费开源的自助建站系统源码？  如何快速登录WAP自助建站平台？