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. MFC程序打开文件对话框出错的问题解决

    前几天从网上下了个图像分析的mfc小程序,是VC6的 用VC6在本地编译生成都没问题.执行起来弹出一个未处理的错误,程序崩溃退出. 想起来原来遇到过打开文件对话框方面的问题,当时项目时间紧张未能深究. ...

  2. 【iOS系列】-UINavigationController的使用（Segue传递数据）

    [iOS系列]-UINavigationController的使用 UINavigationController是以以栈(先进后出)的形式保存子控制器, 常用属性: UINavigationItem有 ...

  3. hibernate could not resolve property

    映射文件字段不匹配 这个异常一般是因为映射文件造成的: 1.hibernate.config.xml中添加的映射文件是否正确 2.映射文件中的类是否正确指定. 3.映射文件映射的属性名是否跟类中的属性 ...

  4. XMU 1050 Diffuse Secret 【最短路】

    1050: Diffuse Secret Time Limit: 500 MS  Memory Limit: 64 MBSubmit: 10  Solved: 8[Submit][Status][We ...

  5. java修改linux文件

    package vedio.test; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.Fil ...

  6. 解决安装YII2 速度慢 失败等问题

    更改composer镜像地址为    composer config -g repo.packagist composer https://packagist.phpcomposer.com

  7. CAAnimation

    序言 CAAnimation是一个抽象类,遵循了CAMediaTiming协议和CAAction协议!我们不要直接使用CAAnimation类,而是使用其子类: CATransition:提供渐变效果 ...

  8. 【JSOI 2007】祖玛

    [题目链接] 点击打开链接 [算法] f[i][j]表示第i段到第j段,最少需要多少次全部消除 那么,当color[i] = color[j]时 : 若s[i] + s[j] > 2,根据题目中 ...

  9. uCos-III移植到STM32F10x

    最近在百度上看了uCOS-III 的介绍后,诸多功能有很大的提升和改进,感觉有必要升级一下开发环境.百度介绍:http://baike.baidu.com/view/8531313.htm 环境: S ...

  10. hdu5410(完全背包变形)

    这是道完全背包,关键点在于如何处理每种物品,第一次放时,价值为A+B,以后放时,价值为A. 所以有三种决策,对于第i种物品,要么不放,要么是作为第一个放,要么是第二个以后放. 作为第一个放时,需要用到 ...