小程序表单组件——button

表单组件

button

button | 微信开放文档

按钮相关的属性，wxml 中的定义

<button size="mini" type="primary" loading="true">按钮</button>
<button size="mini" type="warn" plain="true" bindtap="changeDisabled" hover-class="other-button-hover">启用</button>
<button size="mini" type="primary" disabled="{{disabledBol}}">按钮</button>

为 hover-class 设置的样式，wxss 中的定义

.other-button-hover {
  opacity: 0.2;
}

控制按钮是否屏蔽的 js

changeDisabled: function() {
    this.setData({
        disabledBol: false
    })
},

控制的变量

Page({

  /**
   * 页面的初始数据
   */
  data: {
    disabledBol: true,

button 的 form-type 属性

wxml 中的代码

<form bindsubmit="subFn" bindreset="resetFn">
  <input type="text" name="txtName" />
  <button form-type="submit">提交</button>
  <button form-type="reset">重置</button>
</form>

js 中的代码

resetFn: function() {
    console.log('点击重置了')
},
subFn: function(e) {
    console.log('提交表单:', e.detail.value)
},