小程序学习之路--UI（1）

最新推荐文章于 2025-04-01 21:35:35 发布

原创最新推荐文章于 2025-04-01 21:35:35 发布 · 207 阅读

0 ·

CC 4.0 BY-SA版权

微信小程序&&公众号专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍微信小程序中按钮的wxss样式设置方法，包括直接对wxml组件样式调整及批量设置技巧。涵盖不同类型的按钮如默认、主要和警告按钮的尺寸、加载状态和平面效果属性设置。

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）