微信小程式學習(10)-button控制元件
阿新 • • 發佈:2019-01-08
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>