小程式學習之路--UI(1)
阿新 • • 發佈:2018-12-15
button.wxss
/* pages/button/button.wxss */ .container{ align-items: flex-start; justify-content: flex-start; padding: 0; margin: 10rpx; } .container button{ width: 95%; margin: 10rpx; } /* .defaultButton{ width: 95%; margin: 10rpx; } .primaryButton{ width: 95%; margin: 10rpx; } .warnButton{ width: 95%; margin: 10rpx; } */
button.wxml
<view class="container"> <button class="defaultButton" type="default" size="{{defaultSize}}" loading="{{loading}}" plain='{{plain}}' disabled='{{disable}}' bindtap='default' hover-class='other-button-hover'> default </button> <button class="primaryButton" type="primary" size="{{primarySize}}" loading='{{loading}}' plain='{{plain}}' disabled='{{disable}}' bindtap='primary'>primary</button> <button class="warnButton" type="warn" size="{{warnSize}}" loading='{{loading}}' plain='{{plain}}' disabled='{{disable}}' bindtap='warn'>warn</button> <button bindtap='setDisabled'>點選設定以上按鈕disabled屬性</button> <button bindtap='setPlain'>點選設定以上按鈕plain屬性</button> <button bindtap='setLoading'>點選設定以上按鈕loading屬性</button> </view>``` 上述設定wxml的樣式,兩種方式,一種直接對wxml中定義的元件進行設定,但是需要該元件定義過class屬性(一般需要單獨進行設定的時候需要), 還有一種就是,所有button一起設定,則,直接是某一個元件裡的所有button設定,格式: .某一元件的class(空格)某一類元件名稱(如上述的.container button)