微信小程序button组件使用详解


Posted in Javascript onJanuary 31, 2018

本文为大家分享了微信小程序button组件的使用方法,供大家参考,具体内容如下

展示效果图

微信小程序button组件使用详解

button组件的常用属性

  • size:default、mini—-default为块级按钮、mini为小按钮
  • type:primary、default、warn—-primary提交成功、default默认灰色、warn警告色
  • plain:true、false—-按钮是否镂空,背景色透明
  • disabled:true、false—-是否禁用
  • loading:true、false—-名称前是否带 loading 图标

WXML

<view class="tui-btn-group">
 <view class="tui-btn-content">
  <button size="{{defaultSize}}" bindtap="default" hover-class="other-button-hover"> default </button>
 </view>
 <view class="tui-btn-content">
  <button type="primary" size="{{primarySize}}" bindtap="primary"> primary </button>
 </view>
 <view class="tui-btn-content">
  <button type="warn" size="{{warnSize}}" bindtap="warn"> warn </button>
 </view>
 <view class="tui-btn-content">
  <button bindtap="setDisabled" disabled="{{disabled}}" type="primary">点击设置按钮disabled属性true</button>
 </view>
 <view class="tui-btn-content">
  <button bindtap="setPlain" plain="{{plain}}">点击设置按钮plain属性</button>
 </view>
 <view class="tui-btn-content">
  <button bindtap="setLoading" loading="{{loading}}" type="warn">点击设置按钮loading属性</button>
 </view>
</view>

WXSS

.tui-btn-group{
 padding: 10px;
}
.tui-btn-content{
 height: 60px;
 line-height: 60px;
}
/** 修改button默认的点击态样式类**/
.button-hover {
 background-color: red;
}
/** 添加自定义button点击态样式类**/
.other-button-hover {
 background-color: blue;
}

JS

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
  })
 }
}

//循环给'default', 'primary', 'warn'按钮创建函数
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);

DEMO下载

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
新手入门常用代码集锦
Jan 11 Javascript
javascript面向对象之Javascript 继承
May 04 Javascript
javascript父子页面通讯实例详解
Jul 17 Javascript
javascript中tostring()和valueof()的用法及两者的区别
Nov 16 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
Apr 05 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
Nov 21 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
小程序数据通信方法大全(推荐)
Apr 15 Javascript
javascript定时器的简单应用示例【控制方块移动】
Jun 17 Javascript
vue实现移动端省市区选择
Sep 27 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
May 09 Javascript
微信小程序实现带放大效果的轮播图
May 26 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
Jan 31 #Javascript
微信小程序模板(template)使用详解
Jan 31 #Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
Jan 31 #Javascript
js保留两位小数方法总结
Jan 31 #Javascript
微信小程序icon组件使用详解
Jan 31 #Javascript
详解Chai.js断言库API中文文档
Jan 31 #Javascript
微信小程序 如何引入外部字体库iconfont的图标
Jan 31 #Javascript
You might like
谈谈PHP语法(2)
2006/10/09 PHP
PHP+Mysql+jQuery实现动态展示信息
2011/10/08 PHP
php使用百度翻译api示例分享
2014/01/31 PHP
php截取字符串函数分享
2015/02/02 PHP
基于linnux+phantomjs实现生成图片格式的网页快照
2015/04/15 PHP
PHP性能分析工具XHProf安装使用教程
2015/05/13 PHP
php采集神器cURL使用方法详解
2016/02/19 PHP
简介PHP的Yii框架中缓存的一些高级用法
2016/03/29 PHP
Ajax实现对静态页面的文章访问统计功能示例
2016/10/10 PHP
PHP进阶学习之垃圾回收机制详解
2019/06/18 PHP
如何利用PHP实现上传图片功能详解
2020/09/24 PHP
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
JS 自定义函数缺省值的设置方法
2010/05/05 Javascript
深入理解Javascript动态方法调用与参数修改的问题
2013/12/10 Javascript
jQuery写fadeTo示例代码
2014/02/21 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
2014/06/06 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
2014/11/17 Javascript
正则表达式(语法篇推荐)
2016/06/24 Javascript
javascript动画之模拟拖拽效果篇
2016/09/26 Javascript
Ajax的概述与实现过程
2016/11/18 Javascript
详解vue slot插槽的使用方法
2017/06/13 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
2018/09/25 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
2019/07/22 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
2020/11/02 Javascript
[03:42]2014DOTA2国际邀请赛 第三日比赛排位扑朔迷离
2014/07/12 DOTA
[01:47]2018年度DOTA2最具人气解说-完美盛典
2018/12/16 DOTA
动感网页相册 python编写简单文件夹内图片浏览工具
2016/08/17 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
OpenCV+Python3.5 简易手势识别的实现
2020/12/21 Python
selenium+超级鹰实现模拟登录12306
2021/01/24 Python
深入研究HTML5实现图片压缩上传功能
2016/03/25 HTML / CSS
html5使用canvas绘制太阳系效果
2014/12/15 HTML / CSS
给同事的道歉信
2014/01/11 职场文书
2014年征兵标语
2014/06/20 职场文书
安全先进班组材料
2014/12/26 职场文书
起诉意见书范文
2015/05/19 职场文书