微信小程序 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 相关文章推荐
JQuery autocomplete 使用手册
Apr 01 Javascript
固定背景实现的背景滚动特效示例分享
May 19 Javascript
javascript类型转换使用方法
Feb 08 Javascript
JavaScript中String.match()方法的使用详解
Jun 06 Javascript
Bootstrap实现响应式导航栏效果
Dec 28 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
Jul 24 Javascript
javascript九宫格图片随机打乱位置的实现方法
Mar 15 Javascript
jQuery实现checkbox的简单操作
Nov 18 jQuery
使用typescript开发angular模块并发布npm包
Apr 19 Javascript
Element-UI踩坑之Pagination组件的使用
Oct 29 Javascript
vue动态渲染svg、添加点击事件的实现
Mar 13 Javascript
JS常见错误(Error)及处理方案详解
Jul 02 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
PHP无限分类的类
2007/01/02 PHP
PHP实现正则表达式分组捕获操作示例
2018/02/03 PHP
jQuery 表单验证扩展代码(二)
2010/10/20 Javascript
javascript字符串拼接的效率问题
2010/12/25 Javascript
javascript学习笔记(十) js对象 继承
2012/06/19 Javascript
基于jQuery选择器的整理集合
2013/04/26 Javascript
jquery.cookie用法详细解析
2013/12/18 Javascript
jquery中change()用法实例分析
2015/02/06 Javascript
js调出上下文菜单的实例
2015/12/17 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
2016/09/05 Javascript
Vue常用指令V-model用法
2017/03/08 Javascript
JavaScript ES6中的简写语法总结与使用技巧
2018/12/30 Javascript
详解如何写出一个利于扩展的vue路由配置
2019/05/16 Javascript
微信小程序动态显示项目倒计时
2019/06/20 Javascript
javascript实现滚动条效果
2020/03/24 Javascript
微信小程序返回上一级页面的实现代码
2020/06/19 Javascript
详解阿里Node.js技术文档之process模块学习指南
2021/01/04 Javascript
python实现哈希表
2014/02/07 Python
python实现进程间通信简单实例
2014/07/23 Python
python 将list转成字符串,中间用符号分隔的方法
2018/10/23 Python
Python实现深度遍历和广度遍历的方法
2019/01/22 Python
详解用python实现基本的学生管理系统(文件存储版)(python3)
2019/04/25 Python
Python3直接爬取图片URL并保存示例
2019/12/18 Python
Python接口开发实现步骤详解
2020/04/26 Python
Python文件名匹配与文件复制的实现
2020/12/11 Python
python爬虫线程池案例详解(梨视频短视频爬取)
2021/02/20 Python
Python爬虫实例之2021猫眼票房字体加密反爬策略(粗略版)
2021/02/22 Python
Html5+JS实现手机摇一摇功能
2015/04/24 HTML / CSS
英国派对礼服和连衣裙购物网站:TFNC London
2018/07/07 全球购物
日语翻译个人求职的自我评价
2013/10/14 职场文书
创业计划书的内容步骤和要领
2014/01/04 职场文书
前台文员我鉴定
2014/01/12 职场文书
人事行政经理岗位职责
2014/06/18 职场文书
面试自我评价范文
2014/09/17 职场文书
公司股份转让协议书范本
2015/01/28 职场文书
2015年平安创建工作总结
2015/04/29 职场文书