社区 学习 工具库 休闲
搜索
简体中文
首页 > 微信小程序 > 小程序开发 > 正文

微信小程序组件解读和分析：button按钮实例代码

高洛峰
发布： 2017-03-19 17:36:34
原创
2166 人浏览过

button按钮组件说明:

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

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

微信小程序组件解读和分析：button按钮实例代码


下面是WXML代码：

<!--index.wxml-->
<view class="content">
    <text class="con-text">怎么飞？点击【按钮】即飞</text>
    <button class="con-button">Fly</button>
</view>
登录后复制



下面是JS代码：

Page({
  data:{
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})
登录后复制
登录后复制
登录后复制



下面是WXSS代码：

.content{
  padding-top: 20px;
}
.con-text{
  display: block;
  padding-bottom: 10px;
}
.con-button{
  margin-top: 10px;
  color: black;
  background-color: lightgreen
}
登录后复制


微信小程序组件解读和分析：button按钮实例代码




下面是WXML代码：

<!--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代码：

Page({
  data:{
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})
登录后复制
登录后复制
登录后复制



下面是WXSS代码：

.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;
}
登录后复制


微信小程序组件解读和分析：button按钮实例代码




下面是WXML代码：

<!--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代码：

Page({
  data:{
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})
登录后复制
登录后复制
登录后复制



下面是WXSS代码：

.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;
}
登录后复制

微信小程序组件解读和分析：button按钮实例代码




下面是WXML代码：

<!--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代码：

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代码：

.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;
}
登录后复制

微信小程序组件解读和分析：button按钮实例代码



下面是WXML代码

<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代码：

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代码：

.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按钮实例代码的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：
微信小程序
来源：php.cn
上一篇：微信小程序组件解读和分析：checkbox复选项介绍 下一篇：微信小程序开发LOL英雄实例代码
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
在网络应用程序中显示版本信息的最佳实践是什么？ 我正在开发一个网络应用程序。在网络应用程序中显示版本信息的最佳实践是什么？我正在使用语义版本控制，并且我已经有了semver，例如1.2.0但我很好奇在哪里显示它的最佳方式以及如何...
来自于 2024-04-06 19:13:16
0
2
476
npx create-react-app 命令出现错误，我该如何解决？ 我一直在尝试使用'npxcreate-react-app'命令创建一个新的React应用，但似乎对我来说无效。最近有其他人遇到过这个问题吗？我有一个稳定的互联网连接，并确保我的系统...
来自于 2024-04-05 14:42:18
0
1
3511
如何使用 CSS 删除 Next.js 中井字游戏板上每行下方的空格？ 为什么每一行下面都有一个空格？（CSS）我正在尝试制作一个Next.js井字游戏应用程序来测试我的技能。但是，我遇到了css问题。似乎每行板下方都存在填充问题-每行下方都有一个小空...
来自于 2024-04-05 11:39:02
0
1
1431
如何通过 DOM 而不是通过表来呈现数据 我对我正在创建的应用程序有疑问，我正在使用Oracle数据库，并且我正在从数据库中获取信息并通过表格将其呈现在屏幕上，但我想尝试单独处理这些数据，例如创建一个段落并显示一个值。我只...
来自于 2024-04-04 18:17:27
0
1
3567
Google SHOPIFY用户登录后的授权流程 在登录Google后，我无法在任何地方找到关于用户授权账户的信息。我有一个基于laravel的应用程序，它登录到Google后，我们会收到用户的电子邮件、令牌等信息，那么我们如何将...
来自于 2024-04-04 09:40:59
0
1
310
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板