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

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

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

下面是WXML代码：

    怎么飞？点击【按钮】即飞    Fly

下面是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}

下面是WXML代码：

            #按钮尺寸#        mini:        Fly        default:        Fly                #按钮类型#        primary:        Fly        default:        Fly        warn:        Fly    

下面是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;}

下面是WXML代码：

            #按钮是否镂空#        镂空:        本宝宝的背景被镂空了        没镂空:        我没有被镂空唉                #按钮是否禁用#        禁用:        禁用        没禁用:        活跃                #按钮前是否带loading图标#        有loading:        开车        无loading:        开车    

下面是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;}

下面是WXML代码：

    #按钮前是否带loading图标#    
                    输入：                                        重置            提交            

下面是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;}

下面是WXML代码

            #按钮点击样式改变和绑定事件#        loading    

下面是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按钮的主要属性：

以上就是微信小程序组件解读和分析：button按钮实例代码的详细内容，更多请关注 第一PHP社区 其它相关文章！