button控件学习
1.button属性
2.size和type属性对button的影响
size属性的默认值为default,type属性的默认值也为default,如果值为default时,该属性可以省略;
<view class="content">
<!--type属性为default-->
<!--size属性为default-->
<button type="default" size="default"> size属性为default </button>
<!--size属性为mini-->
<button type="default" size="mini"> size属性为mini </button>
<!--type属性为primary-->
<!--size属性为default-->
<button type="primary" size="default"> size属性为default </button>
<!--size属性为mini-->
<button type="primary" size="mini"> size属性为mini </button>
<!--type属性为warn 一般用于需要慎重点击的按钮-->
<!--size属性为default-->
<button type="warn" size="default"> size属性为default </button>
<!--size属性为mini-->
<button type="warn" size="mini"> size属性为mini </button>
</view>
3.plain属性对按钮的影响
<!--type属性为default-->
<!--plain属性为false的时候可以省略-->
<button type="default" size="default"> size属性为default </button>
<!--plain属性为true-->
<button type="default" size="default" plain="true"> size属性为mini </button>
<!--type属性为primary-->
<!--plain属性为false的时候可以省略-->
<button type="primary" size="default" > size属性为default </button>
<!--plain属性为true-->
<button type="primary" size="default" plain="true"> size属性为mini </button>
<!--type属性为warn 一般用于需要慎重点击的按钮-->
<!--plain属性为false的时候可以省略-->
<button type="warn" size="default"> size属性为default </button>
<!--plain属性为true-->
<button type="warn" size="default" plain="true"> size属性为mini </button>
<text>补充:如果plain属性的值为false的时候要不省略,要不通过.js文件中的值,否则会有问题</text>
<!--不正确,设置为false,但是识别到的字符串不为空,所以都是真值,所以镂空-->
<button type="primary" size="default" plain="false"> size属性为default </button>
<!--通过.js文件中的变量设置值-->
<button type="primary" size="default" plain="{{plain}}"> size属性为default </button>
<!--直接用默认值 推荐-->
<button type="primary" size="default"> size属性为mini </button>
//.js中定义的变量
data: {
plain: false
},
4.disable属性对按钮的影响
<!--disabled属性为false的时候可以省略-->
<button type="primary" size="default" > size属性为default </button>
<!--disabled属性为true-->
<button type="primary" size="default" disabled="true"> size属性为mini </button>
该属性的设置注意点与plain相同,参见plain属性图片上的红色强调字体
5.loading属性对按钮的影响
<!--disabled属性为false的时候可以省略-->
<button type="primary" size="default" > 没有loading的 </button>
<!--disabled属性为true-->
<button type="primary" size="default" loading="true" > 有loading的 </button>
6.注意事项
通常按钮的属性都通过.js文件定义变量来修改,这样便于按钮交互时实时更新按钮状态,提示用户
data: {
defaultSize: 'default',
primarySize: 'default',
warnSize: 'default',
disabled: false,
plain: false,
loading: false
},
在代码用引用变量
<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>