微信小程序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 相关文章推荐
jquery 学习之二 属性 文本与值(text,val)
Nov 25 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
Apr 14 Javascript
Jquery实现仿京东商城省市联动菜单
Nov 19 Javascript
JS本地刷新返回上一页代码
Jul 25 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
Aug 23 Javascript
关于vue.js组件数据流的问题
Jul 26 Javascript
vue cli使用绝对路径引用图片问题的解决
Dec 06 Javascript
js原生方法被覆盖,从新赋值原生的方法
Jan 02 Javascript
vue awesome swiper异步加载数据出现的bug问题
Jul 03 Javascript
JS实现字符串翻转的方法分析
Aug 31 Javascript
微信小程序关键字变色实现代码实例
Dec 13 Javascript
详解 javascript对象创建模式
Oct 30 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实现的获取URL信息的类
2007/01/02 PHP
php define的第二个参数使用方法
2013/11/04 PHP
ThinkPHP内置jsonRPC的缺陷分析
2014/12/18 PHP
详解PHP函数 strip_tags 处理字符串缺陷bug
2017/06/11 PHP
解决php extension 加载顺序问题
2019/08/16 PHP
IE与firefox下Dhtml的一些区别小结
2009/12/02 Javascript
ExtJS4 组件化编程,动态加载,面向对象,Direct
2011/05/12 Javascript
jQuery DOM操作实例
2014/03/05 Javascript
浅析JS异步加载进度条
2016/05/05 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
2016/09/02 Javascript
js实现tab切换效果
2017/02/16 Javascript
Vue组件之极简的地址选择器的实现
2018/05/31 Javascript
bootstrap table列和表头对不齐的解决方法
2019/07/19 Javascript
Vue实现剪切板图片压缩功能
2020/02/04 Javascript
学前端,css与javascript重难点浅析
2020/06/11 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
2020/09/02 Javascript
浅谈vue.watch的触发条件是什么
2020/11/07 Javascript
9种python web 程序的部署方式小结
2014/06/30 Python
朴素贝叶斯算法的python实现方法
2014/11/18 Python
python中迭代器(iterator)用法实例分析
2015/04/29 Python
python通过定义一个类实例作为ftp回调方法
2015/05/04 Python
Python正则表达式匹配中文用法示例
2017/01/17 Python
Python中static相关知识小结
2018/01/02 Python
python jieba分词并统计词频后输出结果到Excel和txt文档方法
2018/02/11 Python
TensorFlow实现Softmax回归模型
2018/03/09 Python
python 处理telnet返回的More,以及get想要的那个参数方法
2019/02/14 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
浅谈sklearn中predict与predict_proba区别
2020/06/28 Python
重写子类方法时,抛出异常的书写注意事项
2015/10/17 面试题
仪器仪表检测毕业生自荐信
2013/10/31 职场文书
小学教研工作制度
2014/01/15 职场文书
庆祝国庆节演讲稿2014
2014/09/19 职场文书
庆祝三八妇女节标语
2014/10/09 职场文书
电影小兵张嘎观后感
2015/06/03 职场文书
读《人生的智慧》有感:闲暇是人生的精华
2019/12/25 职场文书
JS轻量级函数式编程实现XDM二
2022/06/16 Javascript