小程序表单组件--button

button按键组件

<button>按键1</button>
<button size='mini'>按键2</button>
<button size='mini' type='primary'>按键3</button>
<button size='mini' type='primary' plain='true'>按键4</button>
<button size='mini' type='warn' plain='true' disabled='{{startButton}}'>按键5</button>
<button size='mini' type='primary'  bindtap='changDisable'>按键6</button>
<button size='mini' type='primary' plain='true' loading>按键7</button>

<button size='mini' type='warn'>按键-hover-class</button>

不加任何属性默认是占总屏幕宽度, 看上去很大

size属性可以设置其大小, 常用size='mimi', 使按键变得很小

type属性设置的是按键的样式(作用相当于css样式)

plain是否去掉背景色, 保留边框(挖空)

disabled是否禁用, 常用于事件改变其值

loading按键上展示菊花转动的效果

对于button, 如果没有hover-class属性, 点击上去, 可以看到其class属性中默认加入了'button-hover'

它是点击后动态产生的一个值, 被储存在hover-class中, 然后hover-class的值又会放入到class中

可以对其做样式:

.button-hover {
  opacity:0.1        //透明度
}

如果hover-class的初始值我设定为 --> hover-class='other-hover-class'

那么点击后向class中加入的就是other-hover-class而不再是button-hover

可以对其做样式:

.other-hover-class {
  opacity:0.2      //透明度
}

表单提交与重置

<form bindsubmit='submit' bindreset='reset' bindtap='click'>
  <view>用户：<input type="text" name="username" value='张三'/></view>
  <button size="mini" type='primary' form-type='submit'> 提交 </button>
  <button size="mini" type='primary' form-type='reset'> 重置 </button>
</form>

当点击提交会触发bindsubmit事件和bindtap事件(比bindtap附加的功能: 获取到表单数据)

当点击重置会触发bindreset事件和bindtap事件(比bindtap附加的功能: 重置表单)

Page({
  data: {
    
  },
  submit : function(e){
    console.log("submit提交");
    console.log(e.detail.value.username);    /*username就是表单的name值*/
  },
  reset: function () {
    console.log("重置");
  },
  click : function(){
    console.log("click");
  }
})

小程序表单组件--button

猜你喜欢