微信小程序-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) 根据官方开发文档,在wxss中定义类名样式,就可以自定义按钮按下去的样式。但是我在开发中,发现直接这样写没有效果: .button-hover {
background-color: grey;
} 检查下来发现原因是,button已经自定义了背景色,样式选择权重有影响,button的样式如下: .wrap button {
background-color: green;
} 因此把hover选择器修改一下就可以了: .wrap button.button-hover {
background-color: grey;
}
微信小程序-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 ...
- 微信小程序弹窗组件
概述 自己封装的一个比较简单微信弹窗小组件,主要就是教会大家对微信小组件的用法和理解,因为微信小程序对组件介绍特别少,所以我就把自己的理解分享给大家 详细 代码下载: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页面一样添加自定义组 ...
- Wuss Weapp 微信小程序 UI 组件库
微信小程序 UI 组件库 Github地址 https://github.com/phonycode/wuss-weapp 文档 https://phonycode.github.io/wuss-we ...
随机推荐
- Android.InstallAntOnMacOSX
在Mac OS X上安装ant http://blog.csdn.net/crazybigfish/article/details/18215439
- Python-多线程之消费者模式和GIL全局锁
一.生产者和消费者模式 什么是生产者消费者模式 生产者消费者模式是通过一个容器来解决生产者和消费者的强耦合问题.生产者和消费者彼此之间不直接通讯,而通过阻塞队列来进行通讯, 所以生产者生产完数据之后不 ...
- mysql 5.7.17 建立主从数据库
---恢复内容开始--- 1.确定主/从数据库地址; 2.将主数据库的database dump出来 windows平台用workbench; 其他可以参考: 这位同仁写的比较详细了.我就不谢了.打开 ...
- 如何在Windows下安装Tomcat服务器
Tomcat 服务器是一个免费的开放源代码的Web 应用服务器,属于轻量级应用服务器,在中小型系统和并发访问用户不是很多的场合下被普遍使用,是开发和调试JSP 程序的首选服务器.在Windows下安装 ...
- filedisk.sys
i386 amd http://blog.sina.com.cn/s/blog_4fcd1ea30100r19r.html
- Java界面编程—事件的种类
Java处理事件相应的类和监听接口大多位于 awt 包中. 在 java.swing.event 包中有专门用于 swing 组件的事件类和监听接口. awt 事件类继承自 AWTEvent,其超类是 ...
- svn 修改原来包名的方法和会报的错误
SVN E200009 which is not part of the commit; both sides of the move must be committed together 在svn上 ...
- 浅谈 [Ljava.lang.Object 异常
http://blog.csdn.net/goodleiwei/article/details/7059567 主要原因:取出的是对象的数组,需要遍历单个的对象并获取想用的属性值
- Linux下进行程序设计时,关于库的使用:
一.gcc/g++命令中关于库的参数: -shared: 该选项指定生成动态连接库: -fPIC:表示编译为位置独立(地址无关)的代码,不用此选项的话,编译后的代码是位置相关的,所以动态载入时,是通过 ...
- vue实现左侧滑动删除
不是很完美,无法做到第一个左滑其他的隐藏删除: 代码来源于 https://segmentfault.com/a/1190000011062124 自己做了写改动,添加父组件点击触发子组件 引入组件 ...