1. 程式人生 > >小程式學習之路--UI(1)

小程式學習之路--UI(1)

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)