Heim > WeChat-Applet > Mini-Programmentwicklung > Interpretation und Analyse der WeChat-Applet-Komponenten: Beispielcode für eine Schaltfläche

Interpretation und Analyse der WeChat-Applet-Komponenten: Beispielcode für eine Schaltfläche

高洛峰
Freigeben: 2017-03-19 17:36:34
Original
2172 Leute haben es durchsucht

SchaltflächeSchaltflächeKomponentenbeschreibung:

Button, wie der Name schon sagt, Button, ähnlich dem Button-Tag von HTML. Wir können die Eigenschaften der Schaltfläche festlegen, z. B. Schriftfarbe, Größe, Hintergrundfarbe usw. Wir können das -Ereignis an die Schaltfläche binden und das Ereignis wird ausgelöst, wenn der Benutzer darauf klickt.

Schaltfläche SchaltflächeDer Beispielcode der Komponente läuft wie folgt:

Interpretation und Analyse der WeChat-Applet-Komponenten: Beispielcode für eine Schaltfläche


Das Folgende ist der WXML-Code:

<!--index.wxml-->
<view class="content">
    <text class="con-text">怎么飞?点击【按钮】即飞</text>
    <button class="con-button">Fly</button>
</view>
Nach dem Login kopieren



Das Folgende ist der JS-Code:

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



Das Folgende ist der WXSSCode:

.content{
  padding-top: 20px;
}
.con-text{
  display: block;
  padding-bottom: 10px;
}
.con-button{
  margin-top: 10px;
  color: black;
  background-color: lightgreen
}
Nach dem Login kopieren


Interpretation und Analyse der WeChat-Applet-Komponenten: Beispielcode für eine Schaltfläche




Das Folgende ist der WXML-Code:

<!--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>
Nach dem Login kopieren



Das Folgende ist der JS-Code:

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



Das Folgende ist der WXSS-Code:

.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;
}
Nach dem Login kopieren


Interpretation und Analyse der WeChat-Applet-Komponenten: Beispielcode für eine Schaltfläche




Das Folgende ist der WXML-Code:

<!--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>
Nach dem Login kopieren



Das Folgende ist der JS-Code:

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



Der Es folgt der WXSS-Code:

.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;
}
Nach dem Login kopieren

Interpretation und Analyse der WeChat-Applet-Komponenten: Beispielcode für eine Schaltfläche




Das Folgende ist der WXML-Code:

<!--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>
Nach dem Login kopieren



Das Folgende ist der JS-Code:

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);
  }
})
Nach dem Login kopieren



Unten ist der WXSS-Code:

.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;
}
Nach dem Login kopieren

Interpretation und Analyse der WeChat-Applet-Komponenten: Beispielcode für eine Schaltfläche



unten Ist der WXML-Code

<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>
Nach dem Login kopieren



Das Folgende ist der JS-Code:

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
    })
  }
})
Nach dem Login kopieren



Das Folgende ist der WXSS-Code:

.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;
}
Nach dem Login kopieren

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



Das obige ist der detaillierte Inhalt vonInterpretation und Analyse der WeChat-Applet-Komponenten: Beispielcode für eine Schaltfläche. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage