用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

button组件学习笔记

纸飞机 2018-3-8 09:35

作者:johnchai,来自原文地址 button按钮组件说明:button,顾名思义,按钮,类似于html的button标签。我们可以设置按钮的属性,比如字体颜色大小,背景颜色等,可以给按钮绑定事件,用户点击时会触发事件。button按 ...

作者:johnchai,来自

原文地址


button按钮组件说明:

button,顾名思义,按钮,类似于html的button标签。我们可以设置按钮的属性,比如字体颜色大小,背景颜色等,可以给按钮绑定事件,用户点击时会触发事件。

button按钮组件示例代码运行效果如下:

下面是WXML代码:

  1. class="content">
  2. class="con-text">怎么飞?点击【按钮】即飞
  3. class="con-button">Fly

下面是JS代码:

  1. Page({
  2. data:{
  3. },
  4. onLoad:function(options){
  5. // 页面初始化 options为页面跳转所带来的参数
  6. },
  7. onReady:function(){
  8. // 页面渲染完成
  9. },
  10. onShow:function(){
  11. // 页面显示
  12. },
  13. onHide:function(){
  14. // 页面隐藏
  15. },
  16. onUnload:function(){
  17. // 页面关闭
  18. }
  19. })

下面是WXSS代码:

  1. .content{
  2. padding-top: 20px;
  3. }
  4. .con-text{
  5. display: block;
  6. padding-bottom: 10px;
  7. }
  8. .con-button{
  9. margin-top: 10px;
  10. color: black;
  11. background-color: lightgreen
  12. }

下面是WXML代码:

  1. class="content">
  2. class="con-top">
  3. class="text-decoration">#按钮尺寸#
  4. class="con-text">mini:
  5. class="con-button" size="mini">Fly
  6. class="con-text">default:
  7. class="con-button" size="default">Fly
  8. class="con-bottom">
  9. class="text-decoration">#按钮类型#
  10. class="con-text">primary:
  11. class="con-button" type="primary">Fly
  12. class="con-text">default:
  13. class="con-button" type="default">Fly
  14. class="con-text">warn:
  15. class="con-button" type="warn">Fly
鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏