微信小程序 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 面向对象编程基础 多态
Aug 21 Javascript
一些相见恨晚的 JavaScript 技巧
Apr 25 Javascript
jquery获得下拉框值的代码
Aug 13 Javascript
JavaScript实现弹出子窗口并传值给父窗口
Dec 18 Javascript
Jquery操作Ajax方法小结
Nov 29 Javascript
基于JavaScript实现屏幕滚动效果
Jan 18 Javascript
将angular.js项目整合到.net mvc中的方法详解
Jun 29 Javascript
浅谈Vuejs Prop基本用法
Aug 17 Javascript
快速解决vue-cli不能初始化webpack模板的问题
Mar 20 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
Jan 06 Javascript
vue无限轮播插件代码实例
May 10 Javascript
vue路由 遍历生成复数router-link的例子
Oct 30 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中利用explode函数分割字符串到数组
2014/02/08 PHP
zf框架的校验器使用使用示例(自定义校验器和校验器链)
2014/03/13 PHP
PHP用swoole+websocket和redis实现web一对一聊天
2019/11/05 PHP
使用EXT实现无刷新动态调用股票信息
2008/11/01 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
2013/09/04 Javascript
javascript常用对话框小集
2013/09/13 Javascript
Windows系统中安装nodejs图文教程
2015/02/28 NodeJs
DOM 事件的深入浅出(二)
2016/12/05 Javascript
JS敏感词过滤代码
2016/12/23 Javascript
jQuery操作css样式
2017/05/15 jQuery
对vux点击事件的优化详解
2018/08/28 Javascript
angular 表单验证器验证的同时限制输入的实现
2019/04/11 Javascript
js生成1到100的随机数最简单的实现方法
2020/02/07 Javascript
如何修改Vue打包后文件的接口地址配置的方法
2020/04/22 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
2020/07/22 Javascript
python使用urllib2模块获取gravatar头像实例
2013/12/18 Python
python中reduce()函数的使用方法示例
2017/09/29 Python
Python运维之获取系统CPU信息的实现方法
2018/06/11 Python
python 随机生成10位数密码的实现代码
2019/06/27 Python
Flask配置Cors跨域的实现
2019/07/12 Python
详解Python并发编程之创建多线程的几种方法
2019/08/23 Python
pygame库实现俄罗斯方块小游戏
2019/10/29 Python
50行Python代码实现视频中物体颜色识别和跟踪(必须以红色为例)
2019/11/20 Python
Python turtle库绘制菱形的3种方式小结
2019/11/23 Python
python3.8下载及安装步骤详解
2020/01/15 Python
Keras: model实现固定部分layer,训练部分layer操作
2020/06/28 Python
HTML5引入的新数组TypedArray介绍
2012/12/24 HTML / CSS
Scholastic父母商店:儿童书籍
2017/01/01 全球购物
北欧最好的童装网上商店:Babyshop
2019/09/15 全球购物
客户代表实习人员自我鉴定
2013/09/27 职场文书
庆祝教师节演讲稿
2014/09/03 职场文书
小学生自我评价100字(15篇)
2014/09/18 职场文书
如何签定毕业生就业协议书
2014/09/28 职场文书
2015入党个人自传范文
2015/06/26 职场文书
2016年大学生社会实践心得体会
2015/10/09 职场文书
八年级作文之我的母亲
2019/12/10 职场文书