Explication détaillée et exemple simple du composant Button de l'applet WeChat

Cet article présente principalement l'explication détaillée et des exemples simples du composant Button de l'applet WeChat. Les amis dans le besoin peuvent se référer aux

exemples de rendu d'implémentation :

属性名	类型	默认值	说明
size	String	default	有效值default, mini
type	String	default	按钮的样式类型，有效值primary, default, warn
plain	Boolean	false	按钮是否镂空，背景色透明
disabled	Boolean	false	是否禁用
loading	Boolean	false	名称前是否带 loading 图标
formType	String	无	有效值：submit, reset，用于form组件，点击分别会触发submit/reset事件
hover-class	String	button-hover	指定按钮按下去的样式类。当hover-class="none"时，没有点击态效果

Remarque : le survol du bouton est par défaut {background-color:rgba(0,0,0 ,0.1);opacité:0.7;}

Exemple de code :

/** wxss **/
/** 修改button默认的点击态样式类**/
.button-hover{
 background-color:red;
}
/** 添加自定义button点击态样式类**/
.other-button-hover{
 background-color:blur;
}
<button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}"
 disabled="{{disabled}}" bindtap="default" hover-class="other-button-hover"> default </button>
<button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}"
 disabled="{{disabled}}" bindtap="primary"> primary </button>
<button type="warn" size="{{warnSize}}" loading="{{loading}}" plain="{{plain}}"
 disabled="{{disabled}}" bindtap="warn"> warn </button>
<button bindtap="setDisabled">点击设置以上按钮disabled属性</button>
<button bindtap="setPlain">点击设置以上按钮plain属性</button>
<button bindtap="setLoading">点击设置以上按钮loading属性</button>
var types = [&#39;default&#39;, &#39;primary&#39;, &#39;warn&#39;]
var pageObject = {
 data: {
 defaultSize: &#39;default&#39;,
 primarySize: &#39;default&#39;,
 warnSize: &#39;default&#39;,
 disabled: false,
 plain: false,
 loading: false
 },
 setDisabled: function(e) {
 this.setData({
 disabled: !this.data.disabled
 })
 },
 setPlain: function(e) {
 this.setData({
 plain: !this.data.plain
 })
 },
 setLoading: function(e) {
 this.setData({
 loading: !this.data.loading
 })
 }
}

for (var i = 0; i < types.length; ++i) {
 (function(type) {
 pageObject[type] = function(e) {
 var key = type + &#39;Size&#39;
 var changedData = {}
 changedData[key] =
 this.data[key] === &#39;default&#39; ? &#39;mini&#39; : &#39;default&#39;
 this.setData(changedData)
 }
 })(types[i])
}

Page(pageObject)

Merci d'avoir lu, j'espère peut aider tout le monde, merci à tous pour votre soutien à ce site !

Pour des explications plus détaillées et des exemples simples de composants Button de l'applet WeChat, veuillez faire attention au site Web PHP chinois !