欢迎光临，了解微信小程序开发，就上易用通！

当前位置： 易用通 > 开发文档 > 入门

小程序极速实战开发《七》button按钮

发布：2018-01-25 16:37浏览： 次来源：网络 作者：tianshu

组件说明:

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

组件用法：

小程序极速实战开发《七》button按钮(图1)

 



wxml


  1. <!--index.wxml-->
  2. <view class="content">
  3.     <text class="con-text">怎么飞？点击【按钮】即飞</text>
  4.     <button class="con-button">Fly</button>
  5. </view>

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. }

小程序极速实战开发《七》button按钮(图2)

 


wxml


  1. <!--index.wxml-->
  2. <view class="content">
  3.     <view class="con-top">
  4.         <text class="text-decoration">#按钮尺寸#</text>
  5.         <text class="con-text">mini:</text>
  6.         <button class="con-button" size="mini">Fly</button>
  7.         <text class="con-text">default:</text>
  8.         <button class="con-button" size="default">Fly</button>
  9.     </view>
  10.     <view class="con-bottom">
  11.         <text class="text-decoration">#按钮类型#</text>
  12.         <text class="con-text">primary:</text>
  13.         <button class="con-button" type="primary">Fly</button>
  14.         <text class="con-text">default:</text>
  15.         <button class="con-button" type="default">Fly</button>
  16.         <text class="con-text">warn:</text>
  17.         <button class="con-button" type="warn">Fly</button>
  18.     </view>
  19. </view>

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.   width: 90%;
  4.   padding-left: 20px;
  5. }
  6. .con-text{
  7.   display: block;
  8.   padding-bottom: 10px;
  9. }
  10. .con-button{
  11.   color: black;
  12.   background-color: lightgreen;
  13.   margin-bottom: 10px;
  14. }
  15. .con-bottom{
  16.   padding-top: 20px;
  17. }
  18. .con-top{
  19.   padding-bottom: 20px;
  20. }
  21. .text-decoration{
  22.   color: blue;
  23.   display: block;
  24.   text-align: center;
  25. }

小程序极速实战开发《七》button按钮(图3)

 


wxml


  1. <!--index.wxml-->
  2. <view class="content">
  3.     <view class="con-top">
  4.         <text class="text-decoration">#按钮是否镂空#</text>
  5.         <text class="con-text">镂空:</text>
  6.         <button class="con-button" plain>本宝宝的背景被镂空了</button>
  7.         <text class="con-text">没镂空:</text>
  8.         <button class="con-button">我没有被镂空唉</button>
  9.     </view>
  10.     <view>
  11.         <text class="text-decoration">#按钮是否禁用#</text>
  12.         <text class="con-text">禁用:</text>
  13.         <button class="con-button" disabled>禁用</button>
  14.         <text class="con-text">没禁用:</text>
  15.         <button class="con-button">活跃</button>
  16.     </view>
  17.     <view class="con-bottom">
  18.         <text class="text-decoration">#按钮前是否带loading图标#</text>
  19.         <text class="con-text">有loading:</text>
  20.         <button class="con-button" loading>开车</button>
  21.         <text class="con-text">无loading:</text>
  22.         <button class="con-button">开车</button>
  23.     </view>
  24. </view>

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.   width: 90%;
  4.   padding-left: 20px;
  5. }
  6. .con-text{
  7.   display: block;
  8.   padding-bottom: 5px;
  9. }
  10. .con-button{
  11.   color: black;
  12.   background-color: lightgreen;
  13.   margin-bottom: 5px;
  14. }
  15. .con-bottom{
  16.   padding-top: 5px;
  17. }
  18. .con-top{
  19.   padding-bottom: 5px;
  20. }
  21. .text-decoration{
  22.   color: blue;
  23.   display: block;
  24.   text-align: center;
  25. }

小程序极速实战开发《七》button按钮(图4)

 


wxml

  1. <!--index.wxml-->
  2. <view class="content">
  3.     <text class="text-decoration">#按钮前是否带loading图标#</text>
  4.     <form class="formstyle" bindsubmit="formSubmit" bindreset="formReset">
  5.         <view class="shurustyle">
  6.             输入：
  7.             <input name="username" class="inputstyle" />
  8.         </view>
  9.         <view class="buttonstyle">
  10.             <button form-type="reset" class="con-button" hover-class="hoverbutton">重置</button>
  11.             <button form-type="submit" class="con-button" hover-class="hoverbutton">提交</button>
  12.         </view>
  13.     </form>
  14. </view>

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.   formSubmit:function(e){
  20.     console.log(e.detail.value);
  21.   },
  22.   formReset:function(e){
  23.     console.log(e.detail.value);
  24.   }
  25. })

wxss


  1. .content{
  2.   padding-top: 20px;
  3.   width: 90%;
  4.   padding-left: 20px;
  5. }
  6. .con-button{
  7.   color: black;
  8.   background-color: lightgreen;
  9.   margin-bottom: 5px;
  10. }
  11. .text-decoration{
  12.   color: blue;
  13.   display: block;
  14.   text-align: center;
  15.   padding-bottom: 20px;
  16. }
  17. .buttonstyle{
  18.   display: flex;
  19.   flex-direction: row;
  20.   padding-top: 20px;
  21. }
  22. .inputstyle{
  23.   background-color: lightgray;
  24.   width: 80%;
  25. }
  26. .shurustyle{
  27.   padding-left: 15%;
  28. }
  29. .hoverbutton{
  30.   background-color: lightgray;
  31. }

小程序极速实战开发《七》button按钮(图5)

 


wxml


  1. <view class="content">
  2.     <view class="con-top">
  3.         <text class="text-decoration">#按钮点击样式改变和绑定事件#</text>
  4.         <button class="con-button" hover-class="hoverclass" loading="{{isloading}}" bindtap="changeLoading">loading</button>
  5.     </view>
  6. </view>

js


  1. Page({
  2.   data:{  
  3.     isloading:true
  4.   },
  5.   onLoad:function(options){
  6.     // 页面初始化 options为页面跳转所带来的参数
  7.   },
  8.   onReady:function(){
  9.     // 页面渲染完成
  10.   },
  11.   onShow:function(){
  12.     // 页面显示
  13.   },
  14.   onHide:function(){
  15.     // 页面隐藏
  16.   },
  17.   onUnload:function(){
  18.     // 页面关闭
  19.   },
  20.   changeLoading:function(){
  21.     console.log("loading status:"+this.data.isloading);
  22.     var loadingstatus=this.data.isloading;
  23.     this.setData({
  24.       isloading:!loadingstatus
  25.     })
  26.   }
  27. })

wxss


  1. .content{
  2.   padding-top: 20px;
  3.   width: 90%;
  4.   padding-left: 20px;
  5. }
  6. .con-button{
  7.   color: black;
  8.   background-color: lightgreen;
  9.   margin-top: 15px;
  10. }
  11. .text-decoration{
  12.   color: blue;
  13.   display: block;
  14.   text-align: center;
  15.   font-family: "KaiTi"
  16. }
  17. .hoverclass{
  18.   background-color: orange;
  19.   color: green;
  20.   font-size: 25px;
  21. }

主要属性：
属性
类型
默认值
描述
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





免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

相关文章
最新文章
推荐文章
随机文章
热门小程序
开发文档 | 运营教程 小程序模板 | 小程序应用 | 标签大全
Copyright © 2017 https://www.yiyongtong.com 易用通 版权所有