微信小程序学习(10)-button控件

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>