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


Posted in Javascript onJanuary 10, 2017

微信小程序 Button

相关文章:

微信小程序 Button

微信小程序 radio

微信小程序 slider

微信小程序 switch

微信小程序 textarea

微信小程序 picker-view

微信小程序 picker

微信小程序 label

微信小程序 input 

微信小程序 form

微信小程序 checkbox

实现实例效果图:

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

属性名 类型 默认值 说明
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)

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

Javascript 相关文章推荐
对字符串进行HTML编码和解码的JavaScript函数
Feb 01 Javascript
javascript 嵌套的函数(作用域链)
Mar 15 Javascript
使用C++为node.js写扩展模块
Apr 22 Javascript
JS中call/apply、arguments、undefined/null方法详解
Feb 15 Javascript
Web Uploader文件上传插件使用详解
May 10 Javascript
jQuery中用on绑定事件时需注意的事项
Mar 19 Javascript
JavaScript原生数组Array常用方法
Apr 06 Javascript
JavaScript继承与多继承实例分析
May 26 Javascript
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
在vue-cli 3中给stylus、sass样式传入共享的全局变量
Aug 12 Javascript
微信小程序分包加载代码实现方法详解
Sep 23 Javascript
vue下的@change事件的实现
Oct 25 Javascript
jQuery zTree树插件简单使用教程
Jan 10 #Javascript
详解JS中的快速排序与冒泡
Jan 10 #Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 #Javascript
VueJs路由跳转——vue-router的使用详解
Jan 10 #Javascript
js自定义QQ菜单效果
Jan 10 #Javascript
js实现将json数组显示前台table中
Jan 10 #Javascript
详解Vue自定义过滤器的实现
Jan 10 #Javascript
You might like
星际争霸, 教主第一视角, ZvT经典龙蛇演义
2020/03/02 星际争霸
常用星际术语索引(新手指南)
2020/03/04 星际争霸
php中使用Imagick实现图像直方图的实现代码
2011/08/30 PHP
PHP读取配置文件类实例(可读取ini,yaml,xml等)
2015/07/28 PHP
PHP7引入的&quot;??&quot;和&quot;?:&quot;的区别讲解
2019/04/08 PHP
ie下动态加态js文件的方法
2011/09/13 Javascript
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
javascript监听鼠标滚轮事件浅析
2014/06/05 Javascript
javascript结合ajax读取txt文件内容
2014/12/05 Javascript
JavaScript日期时间与时间戳的转换函数分享
2015/01/31 Javascript
JS验证输入的是否是数字及保留几位小数问题
2018/05/09 Javascript
微信小程序实现弹出菜单功能
2018/06/12 Javascript
浅谈webpack+react多页面开发终极架构
2018/11/11 Javascript
JS实现的全选、全不选及反选功能【案例】
2019/02/19 Javascript
Vue 开发必须知道的36个技巧(小结)
2019/10/09 Javascript
vuex state中的数组变化监听实例
2019/11/06 Javascript
[01:03:59]2018DOTA2亚洲邀请赛3月30日 小组赛B组VGJ.T VS Secret
2018/03/31 DOTA
Python中Class类用法实例分析
2015/11/12 Python
django model去掉unique_together报错的解决方案
2016/10/18 Python
python多线程同步之文件读写控制
2021/02/25 Python
win10环境下配置vscode python开发环境的教程详解
2019/10/16 Python
python多线程案例之多任务copy文件完整实例
2019/10/29 Python
基于Tensorflow的MNIST手写数字识别分类
2020/06/17 Python
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
美国领先的汽车轮胎和轮毂供应商:TireBuyer
2016/07/21 全球购物
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
.NET里面什么时候需要调用垃圾回收
2015/06/01 面试题
下面代码从性能上考虑,有什么问题
2015/04/03 面试题
数学专业推荐信范文
2013/11/21 职场文书
20年同学聚会邀请函
2014/02/04 职场文书
电气工程自动化求职信
2014/03/14 职场文书
Python面向对象之成员相关知识总结
2021/06/24 Python
JavaScript 与 TypeScript之间的联系
2021/11/27 Javascript
基于Redis zSet实现滑动窗口对短信进行防刷限流的问题
2022/02/12 Redis
Apache Linkis 中间件架构及快速安装步骤
2022/03/16 Servers
SQL Server数据库备份和恢复数据库的全过程
2022/06/14 SQL Server