微信小程序 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读取ASP设定的COOKIE
Nov 24 Javascript
javascript实现的基于金山词霸网络翻译的代码
Jan 15 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
Mar 29 Javascript
jquery二级导航内容均分的原理及实现
Aug 13 Javascript
代码获取历史上的今天发生的事
Apr 11 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
Oct 27 Javascript
原生js页面滚动延迟加载图片
Dec 20 Javascript
javascript实现简单加载随机色方块
Dec 25 Javascript
详解Node.js access_token的获取、存储及更新
Jun 20 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
Mar 06 Javascript
JavaScript canvas绘制渐变颜色的矩形
Feb 18 Javascript
浅谈vue.watch的触发条件是什么
Nov 07 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与php MySQL 之间的关系
2009/07/17 PHP
php 输出双引号&quot;与单引号'的方法
2010/05/09 PHP
Windows下编译PHP5.4和xdebug全记录
2015/04/03 PHP
PHP使用内置函数file_put_contents写入文件及追加内容的方法
2015/12/07 PHP
php判断用户是否关注微信公众号
2016/07/22 PHP
利用PHP自动生成印有用户信息的名片
2016/08/01 PHP
php array_walk_recursive 使用自定的函数处理数组中的每一个元素
2016/11/16 PHP
浅谈PHP中new self()和new static()的区别
2017/08/11 PHP
Javascript引用指针使用介绍
2012/11/07 Javascript
jquery实现多屏多图焦点图切换特效的方法
2015/05/04 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
2016/07/07 Javascript
Mongoose经常返回e11000 error的原因分析
2017/03/29 Javascript
每个 JavaScript 工程师都应懂的33个概念
2018/10/22 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
vuejs移动端实现div拖拽移动
2019/07/25 Javascript
p5.js绘制创意自画像
2019/11/04 Javascript
原生JavaScript之es6中Class的用法分析
2020/02/23 Javascript
ES6新增的数组知识实例小结
2020/05/23 Javascript
Python内置模块logging用法实例分析
2018/02/12 Python
python获取网页中所有图片并筛选指定分辨率的方法
2018/03/31 Python
pytorch训练imagenet分类的方法
2018/07/27 Python
使用python制作一个为hex文件增加版本号的脚本实例
2019/06/12 Python
解决python 上传图片限制格式问题
2019/10/30 Python
Python元组 tuple的概念与基本操作详解【定义、创建、访问、计数、推导式等】
2019/10/30 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
Python 内存管理机制全面分析
2021/01/16 Python
使用Python制作一个数据预处理小工具(多种操作一键完成)
2021/02/07 Python
python编程的核心知识点总结
2021/02/08 Python
一些常用的HTML5模式(pattern) 总结
2015/07/14 HTML / CSS
TripAdvisor德国:全球领先的旅游网站
2017/12/07 全球购物
医生进修自我鉴定
2014/01/19 职场文书
请假条标准格式规范
2014/04/10 职场文书
新农村建设标语
2014/06/24 职场文书
家长反馈意见及建议
2015/06/03 职场文书
《彼得与狼》教学反思
2016/02/20 职场文书
Python函数式编程中itertools模块详解
2021/09/15 Python