button按钮组件说明:

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

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

下面是WXML代码：

[XML] 纯文本查看 复制代码
1
2
3
4
5
<!--index.wxml-->
<view class="content">
    <text class="con-text">怎么飞？点击【按钮】即飞</text>
    <button class="con-button">Fly</button>
</view>

下面是JS代码：

[JavaScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
Page({
  data:{
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

下面是WXSS代码：

[CSS] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
.content{
  padding-top: 20px;
}
.con-text{
  display: block;
  padding-bottom: 10px;
}
.con-button{
  margin-top: 10px;
  color: black;
  background-color: lightgreen
}

下面是WXML代码：

[XML] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
<!--index.wxml-->
<view class="content">
    <view class="con-top">
        <text class="text-decoration">#按钮尺寸#</text>
        <text class="con-text">mini:</text>
        <button class="con-button" size="mini">Fly</button>
        <text class="con-text">default:</text>
        <button class="con-button" size="default">Fly</button>
    </view>
    <view class="con-bottom">
        <text class="text-decoration">#按钮类型#</text>
        <text class="con-text">primary:</text>
        <button class="con-button" type="primary">Fly</button>
        <text class="con-text">default:</text>
        <button class="con-button" type="default">Fly</button>
        <text class="con-text">warn:</text>
        <button class="con-button" type="warn">Fly</button>
    </view>
</view>

下面是JS代码：

[JavaScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
Page({
  data:{
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

下面是WXSS代码：

[CSS] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.content{
  padding-top: 20px;
  width: 90%;
  padding-left: 20px;
}
.con-text{
  display: block;
  padding-bottom: 10px;
}
.con-button{
  color: black;
  background-color: lightgreen;
  margin-bottom: 10px;
}
.con-bottom{
  padding-top: 20px;
}
.con-top{
  padding-bottom: 20px;
}
.text-decoration{
  color: blue;
  display: block;
  text-align: center;
}

下面是WXML代码：

[XML] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!--index.wxml-->
<view class="content">
    <view class="con-top">
        <text class="text-decoration">#按钮是否镂空#</text>
        <text class="con-text">镂空:</text>
        <button class="con-button" plain>本宝宝的背景被镂空了</button>
        <text class="con-text">没镂空:</text>
        <button class="con-button">我没有被镂空唉</button>
    </view>
    <view>
        <text class="text-decoration">#按钮是否禁用#</text>
        <text class="con-text">禁用:</text>
        <button class="con-button" disabled>禁用</button>
        <text class="con-text">没禁用:</text>
        <button class="con-button">活跃</button>
    </view>
    <view class="con-bottom">
        <text class="text-decoration">#按钮前是否带loading图标#</text>
        <text class="con-text">有loading:</text>
        <button class="con-button" loading>开车</button>
        <text class="con-text">无loading:</text>
        <button class="con-button">开车</button>
    </view>
</view>

下面是JS代码：

[JavaScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
Page({
  data:{
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

下面是WXSS代码：

[CSS] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.content{
  padding-top: 20px;
  width: 90%;
  padding-left: 20px;
}
.con-text{
  display: block;
  padding-bottom: 5px;
}
.con-button{
  color: black;
  background-color: lightgreen;
  margin-bottom: 5px;
}
.con-bottom{
  padding-top: 5px;
}
.con-top{
  padding-bottom: 5px;
}
.text-decoration{
  color: blue;
  display: block;
  text-align: center;
}

下面是WXML代码：

[XML] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
<!--index.wxml-->
<view class="content">
    <text class="text-decoration">#按钮前是否带loading图标#</text>
    <form class="formstyle" bindsubmit="formSubmit" bindreset="formReset">
        <view class="shurustyle">
            输入：
            <input name="username" class="inputstyle" />
        </view>
        <view class="buttonstyle">
            <button form-type="reset" class="con-button" hover-class="hoverbutton">重置</button>
            <button form-type="submit" class="con-button" hover-class="hoverbutton">提交</button>
        </view>
    </form>
</view>

下面是JS代码：

[JavaScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Page({
  data:{
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  },
  formSubmit:function(e){
    console.log(e.detail.value);
  },
  formReset:function(e){
    console.log(e.detail.value);
  }
})

下面是WXSS代码：

[CSS] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.content{
  padding-top: 20px;
  width: 90%;
  padding-left: 20px;
}
.con-button{
  color: black;
  background-color: lightgreen;
  margin-bottom: 5px;
}
.text-decoration{
  color: blue;
  display: block;
  text-align: center;
  padding-bottom: 20px;
}
.buttonstyle{
  display: flex;
  flex-direction: row;
  padding-top: 20px;
}
.inputstyle{
  background-color: lightgray;
  width: 80%;
}
.shurustyle{
  padding-left: 15%;
}
.hoverbutton{
  background-color: lightgray;
}

下面是WXML代码：

[XML] 纯文本查看 复制代码
1
2
3
4
5
6
<view class="content">
    <view class="con-top">
        <text class="text-decoration">#按钮点击样式改变和绑定事件#</text>
        <button class="con-button" hover-class="hoverclass" loading="{{isloading}}" bindtap="changeLoading">loading</button>
    </view>
</view>

下面是JS代码：

[JavaScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
Page({
  data:{
    isloading:true
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  },
  changeLoading:function(){
    console.log("loading status:"+this.data.isloading);
    var loadingstatus=this.data.isloading;
    this.setData({
      isloading:!loadingstatus
    })
  }
})

下面是WXSS代码：

[CSS] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
.content{
  padding-top: 20px;
  width: 90%;
  padding-left: 20px;
}
.con-button{
  color: black;
  background-color: lightgreen;
  margin-top: 15px;
}
.text-decoration{
  color: blue;
  display: block;
  text-align: center;
  font-family: "KaiTi"
}
.hoverclass{
  background-color: orange;
  color: green;
  font-size: 25px;
}

button按钮的主要属性：

属性
类型
默认值
描述
size String default 表示按钮的大小，有两个值：default和mini
type String default 表示按钮的样式类型，有三个值：default、primary和warn
plain Boolean false 表示按钮是否镂空，即背景是否被抹去，不写该属性则为false，写上该属性则为true，也可写成plain=”false”
disabled Boolean false 表示按钮是否被禁用，不写该属性则为false，写上该属性则为true，也可写成plain=”false”
loading Boolean false 表示按钮名称前是否有loading图标，不写该属性则为false，写上该属性则为true，也可写成plain=”false”
form-type String 无 与form表单组件一起使用时，reset表示清空form表单内容事件，submit表示提交form表单内容事件，即有两个值：reset和submit
hover-class String button-hover 表示按钮被点击时的样式，可以自定义一个css，然后将hover-class指向这个css

点击查看原文

微信小程序组件解读和分析：七、button按钮的更多相关文章

  1. 微信小程序组件解读和分析：六、progress进度条

    progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行.progress进度条是微信小程序的组件,和HTML5的进度条progress类似. pro ...

  2. 微信小程序组件解读和分析：五、text文本

    text文本组件说明: text 文本就是微信小程序中显示出来的文本. text文本组件的示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 1 2 3 4 <v ...

  3. 微信小程序组件解读和分析：四、icon图标

      icon图标组件说明: icon是一种图标格式,用于系统图标.软件图标等,这种图标扩展名为.icon..ico.常见的软件或windows桌面上的那些图标一般都是ICON格式的.在应用上面很多地方 ...

  4. 微信小程序组件解读和分析：十四、slider滑动选择器

    slider滑动选择器组件说明: 滑动选择器. slider滑动选择器示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 ...

  5. 微信小程序组件解读和分析：十、input输入框

    input输入框组件说明: 本文介绍input 输入框的各种参数及特性. input输入框示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 01 02 03 04 0 ...

  6. 微信小程序组件解读和分析：八、checkbox复选项

    checkbox复选项组件说明: checkbox是小程序表单组件中的一个组件,作用是在表单中引导用户做出选择. 要使用checkbox组件,还需要在同组中所有的checkbox标签外使用checkb ...

  7. 微信小程序组件解读和分析：一、view（视图容器 ）

    view组件说明:    视图容器    跟HTML代码中的DIV一样,可以包裹其他的组件,也可以被包裹在其他的组件内部.用起来比较自由随意,没有固定的结构. view组件的用法: 示例项目的wxml ...

  8. 微信小程序组件解读和分析：十五、switch 开关选择器

    switch 开关选择器组件说明: switch,开关选择器.只能选择或者不选.这种属于表单控件或者查询条件控件. switch 开关选择器示例代码运行效果如下: 下面是WXML代码: [XML] 纯 ...

  9. 微信小程序组件解读和分析：十三、radio单选项目

    radio单选项目组件说明: radio:单选项目. radio-group: 单项选择器,内部由多个<radio/>组成. radio单选项目示例代码运行效果如下: 下面是WXML代码: ...

随机推荐

  1. Axure使用笔记

    软件设置类 两个矩形的双边框,边框重合: 项目---项目设置---边界对齐---内边界对齐. 自动备份时间设置 文件-自动备份设置-默认15分钟,根据电脑硬件可以调整. Axure 8 可以不用安装 ...

  2. Python爬虫开发【第1篇】【Scrapy shell】

    Scrapy Shell Scrapy终端是一个交互终端,我们可以在未启动spider的情况下尝试及调试代码,也可以用来测试XPath或CSS表达式,查看他们的工作方式,方便我们爬取的网页中提取的数据 ...

  3. SSH三大框架整合配置详细步骤（3）

    5 配置Spring2.5 5.1 基础配置 1)        导入spring包.下载spring-framework-2.5.6并解压后,在spring-framework-2.5.6" ...

  4. 找不到或无法加载主类 ide 正常执行，但是打包jar后报错 maven 引入本地包

    错误: 找不到或无法加载主类 com.myali.TTSmy 问题原因: ide中编译能找到相关包,但是,打包成jar时,本地的jar引入失败 maven将系统用到的包从线上maven仓库下载到本地的 ...

  5. 自己写好的pdo数据库抽象层 mysql为例

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/qq1355541448/article/details/31787719 class pdo_dat ...

  6. 设计模式-（11）组合模式 （swift版）

    一,概念 组合模式(Composite Pattern),又叫部分整体模式,是用于把一组相似的对象当作一个单一的对象.组合模式依据树形结构来组合对象,用来表示部分以及整体层次.这种类型的设计模式属于结 ...

  7. bzoj5333: [Sdoi2018]荣誉称号

    请不要去改题目给的输入,不然你会wa穿... 这么故弄玄虚的题目,肯定要先转换问题 看到这个不断的除2想起别人家的线段树的写法...x的两个孩子是x<<1和x<<1|1 然后问 ...

  8. 【Codevs1346】HelloWorld编译器

    http://codevs.cn/problem/1346/ 可怜我战绩 // <1346.cpp> - 10/30/16 17:12:09 // This file is made by ...

  9. SDL2：封装媒体显示播放Csdl2

    Github https://github.com/gongluck/SDL2-study/tree/master/Csdl2 Csdl2.h #ifndef __CSDL2_H__ #define ...

  10. MVC视图中下拉框的使用

    一.一般变量或对象的绑定 首先要在controller 中将选项设置成 selecList对象,并赋值给viewBag动态对象. public ActionResult Index(string mo ...