微信小程序 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 相关文章推荐
JavaScript中的类继承
Nov 25 Javascript
Jquery动态进行图片缩略的原理及实现
Aug 13 Javascript
jQuery实现图片信息的浮动显示实例代码
Aug 28 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
Dec 28 Javascript
js语法学习之判断一个对象是否为数组
May 13 Javascript
JS+Canvas绘制时钟效果
Aug 20 Javascript
JQuery中Ajax的操作完整例子
Mar 07 Javascript
Node.js和Express简单入门介绍
Mar 24 Javascript
JavaScript原生实现观察者模式的示例
Dec 15 Javascript
vue.js input框之间赋值方法
Aug 24 Javascript
vue组件之间通信实例总结(点赞功能)
Dec 05 Javascript
jquery树形插件zTree高级使用详解
Aug 16 jQuery
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
改进的IP计数器
2006/10/09 PHP
php urlencode()与urldecode()函数字符编码原理详解
2011/12/06 PHP
PHP使用正则表达式清除超链接文本
2013/11/12 PHP
PHP的运行机制与原理(底层)
2015/11/16 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
PHP PDOStatement::debugDumpParams讲解
2019/01/30 PHP
jQuery之Deferred对象详解
2014/09/04 Javascript
JS获取及验证开始结束日期的方法
2016/08/20 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
2020/11/16 Javascript
js窗口震动小程序分享
2016/11/28 Javascript
JS求解三元一次方程组值的方法
2017/01/03 Javascript
原生js实现中奖信息无间隙滚动效果
2017/01/18 Javascript
JS实现图片放大缩小的方法
2017/02/15 Javascript
axios拦截设置和错误处理方法
2018/03/05 Javascript
vue中各种通信传值方式总结
2019/02/14 Javascript
详解Vue前端生产环境发布配置实战篇
2019/05/07 Javascript
layui自己添加图片按钮并点击跳转页面的例子
2019/09/14 Javascript
VUE 解决mode为history页面为空白的问题
2019/11/01 Javascript
react PropTypes校验传递的值操作示例
2020/04/28 Javascript
vue vant中picker组件的使用
2020/11/03 Javascript
Python实现统计单词出现的个数
2015/05/28 Python
python利用微信公众号实现报警功能
2018/06/10 Python
Python多进程入门、分布式进程数据共享实例详解
2019/06/03 Python
Python pandas用法最全整理
2019/08/04 Python
解决Python paramiko 模块远程执行ssh 命令 nohup 不生效的问题
2020/07/14 Python
Numpy中np.random.rand()和np.random.randn() 用法和区别详解
2020/10/23 Python
Selenium获取登录Cookies并添加Cookies自动登录的方法
2020/12/04 Python
英国最大的海报商店:GB Posters
2018/03/20 全球购物
建筑工程技术应届生求职信
2013/11/17 职场文书
酒店前台接待岗位职责
2013/12/03 职场文书
入党积极分子思想汇报范文
2014/01/05 职场文书
助人为乐好少年事迹材料
2014/08/18 职场文书
地球物理学专业推荐信
2014/09/08 职场文书
学习优秀党务工作者先进事迹材料思想报告
2014/09/17 职场文书
再读《皇帝的新衣》的读后感悟!
2019/08/07 职场文书
学习nginx基础知识
2021/09/04 Servers