第九篇、微信小程序-button组件
主要属性:
注:button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}
效果图:
ml:
<!--默认的button, 默认大小default,默认加载false,默认按键不为镂空,默认可以点击,点击有效果hover-class="other-button-hover"-->
<button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}"
disabled="{{disabled}}" bindtap="setDefault"
hover-class="other-button-hover" class="margin-button"> default </button>
<!--主要的按钮,点击背景没有效果hover-class="none" -->
<button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}"
disabled="{{disabled}}" bindtap="setPrimary" hover-class="none" class="margin-button"> primary </button>
<!--警告按钮,点击背景有效果hover-class="button-hover" -->
<button type="warn" size="{{warnSize}}" loading="{{loading}}" plain="{{plain}}"
disabled="{{disabled}}" bindtap="setWarn" hover-class="button-hover" class="margin-button"> warn </button>
<button bindtap="setDisabled" class="margin-button">点击设置以上按钮disabled属性</button>
<button bindtap="setPlain" class="margin-button">点击设置以上按钮plain属性</button>
<button bindtap="setLoading" class="margin-button">点击设置以上按钮loading属性</button>
<button bindtap="setSize" class="margin-button">点击设置以上按钮size属性</button>
ss:
/** wxss **/
/** 修改button默认的点击态样式类**/
.button-hover {
background-color: yellow;
opacity: 0.7;
}
/** 添加自定义button点击态样式类**/
.other-button-hover {
background-color: green;
opacity: 0.7;
}
.margin-button{
margin-top: 10px;
}
js:
var pageObject = {
data: {
defaultSize: 'default',////有效值 default, mini
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
})
},
//设计按钮名称前是否带 loading 图标
setLoading: function(e) {
this.setData({
loading: !this.data.loading
})
},
//设计按钮的大小
setSize:function(){
this.setData({
defaultSize: this.data.defaultSize=='default' ? 'mini' : 'default',////有效值 default, mini
primarySize: this.data.defaultSize=='default' ? 'mini' : 'default',
warnSize: this.data.defaultSize=='default' ? 'mini' : 'default',
})
},
setDefault:function(){
console.log('setDefault....')
},
setWarn:function(){
console.log('setWarn....')
},
setPrimary:function(){
console.log('setPrimary....')
},
}
Page(pageObject)
第九篇、微信小程序-button组件的更多相关文章
- 微信小程序 button 组件
button 组件 拥有强大的功能 自身可以拥有很多跟微信风格的样式,且是 表单 和 开放的能力 重要的 按钮 button 的属性: size: 类型 字符串 按钮的大小 属性值:default 默 ...
- 微信小程序button组件样式
点击微信按键组件才能出授权,所以自定义样式就是必须的了,来自网友的帮助,如下图 <button class='btn1' open-type='contact'> <image cl ...
- 微信小程序-button组件
主要属性: 注:button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;} 效果图: ml: <!--默认的but ...
- 微信小程序倒计时组件开发
今天给大家带来微信小程序倒计时组件具体开发步骤: 先来看下最终效果: git源:http://git.oschina.net/dotton/CountDown 分步骤-性子急的朋友,可以直接看最后那段 ...
- 微信小程序弹窗组件
概述 自己封装的一个比较简单微信弹窗小组件,主要就是教会大家对微信小组件的用法和理解,因为微信小程序对组件介绍特别少,所以我就把自己的理解分享给大家 详细 代码下载:http://www.demoda ...
- 微信小程序的组件总结
本文介绍微信小程序的组件 视图容器 基础内容 表单组件 导航组件 媒体组件 视图容器 view 布局容器 <view hover-class='bg'>222</view> 可 ...
- Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库
Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库 文档 https://phonycode.github.io/wuss-weapp 扫码体验 使用微信扫一扫体验小程序组 ...
- 微信小程序UI组件库 iView Weapp快速上手
概述 今天在网上突然看到iView新出了一个微信小程序的组件库iView Weapp,自己就上手试了一下,发现用起来还是不错的,把自己使用的过程与大家分享下. 一 预览iView组件 1.可以在手机上 ...
- 微信小程序自定义组件,提示组件
微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加“components”目录,然后像添加Page页面一样添加自定义组 ...
随机推荐
- python函数介绍
1.向函数传递信息 def greet_user(username): print('Hello,' + username.title() + '!') greet_user('jesse') 2.位 ...
- C#操作Word (1)Word对象模型
Word对象模型 (.Net Perspective) 本文主要针对在Visual Studio中使用C# 开发关于Word的应用程序 来源:Understandingthe Word Object ...
- delphi execCommand
WebBrowser1.Document as IHTMLDocument2 关键点 function execCommand(const cmdID: WideString; showUI: Wor ...
- 安卓Activity界面切换添加动画特效
在Android 2.0之后有了overridePendingTransition() ,其中里面两个参数,一个是前一个activity的退出两一个activity的进入, @Override pub ...
- hive-0.10.0-cdh4.3.0安装
1.我使用的Hadoop2.0-cdh4.3.0,相应hive配套版本号hive-0.10.0-cdh4.3.0. 2.改动hive/conf下hive-site.xml文件,无则创建hive- ...
- cc代码学习笔记1
#define #define INT32 int #define INT8 char #define CHAR char #define SSHORT signed short #define IN ...
- Linux shell 脚本攻略之文件查找与文件列表
摘自:<Linux shell 脚本攻略>
- NODE编程(一)--Node功能的组织和重用
Node开发面对的两个问题: 1.如何组织代码 2.如何进行异步编程. 一.Node功能的组织和重用 Node模块允许你从被引入文件中选择要暴露给程序的函数和变量.如果模块返回的函数或变量不止一个,那 ...
- Windows主机通过SSH连接虚拟机里的Linux系统
Windows 7 + VMware 11 VMWare里:编辑-虚拟网络编辑器-VMnet8(NAT模式)-NAT设置...添加主机端口和虚拟机IP地址以及虚拟机端口 Windows7系统:wind ...
- 使用在storyBoard之外的xib创建对象
1.在storyBoard之外的xib 要注意的是:TableView的代理一定要设置为FilesOwner 使用: 方式一: 直接创建对象如下,(如果要使用xib里的控件,那么就要将xib里的控件作 ...