小程序学习之路--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）