从WeUI-Uploader源码学习：CSS布局与Stylus实用技巧一、初识WeUI-Uploader组件最近在学习

一、初识WeUI-Uploader组件

最近在学习微信官方UI库WeUI的上传组件源码，发现其中包含了很多移动端CSS布局的最佳实践。这个上传组件不仅实现了图片预览、数量控制等基础功能，更重要的是它的代码组织方式和样式处理技巧非常值得学习。

页面展示：

二、HTML结构分析

先看核心HTML结构，WeUI采用了语义化标签和清晰的层级结构：

<div class="weui-cells weui-cells_form">
  <div class="weui-cell weui-cell_uploader">
    <div class="weui-cell__bd">
      <div class="weui-uploader">
        <div class="weui-uploader__hd">
          <p class="weui-uploader__title">图片上传</p>
          <div class="weui-uploader__info">
            <span>0</span> / <span>2</span>
          </div>
        </div>
        <div class="weui-uploader__bd">
          <ul class="weui-uploader__files">
            <li class="weui-uploader__file"></li>
            <!-- 更多文件项 -->
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

这里最值得注意的是采用了 BEM命名规范：

Block（块）： weui-uploader
Element（元素）： weui-uploader__hd 、 weui-uploader__bd
Modifier（修饰符）：没有直接体现，但可以通过额外类名实现这种命名方式让CSS结构清晰，一看就知道各个类之间的关系。

三、Stylus预处理的妙用

项目中使用了 Stylus 作为CSS预处理工具，带来了很多便利：

1. 变量定义与使用

$weui-bg-0 = #ededed
$weui-bg-2 = #fff
$weui-fg-1 = rgba(0,0,0,0.55)
$weui-fg-2 = rgba(0,0,0,0.3)
$weui-fg-3 = rgba(0,0,0,0.1)

.page
  background-color $weui-bg-0

.weui-cells
  background-color $weui-bg-2

通过变量统一管理颜色值，不仅方便维护，还能确保整个项目的视觉一致性。

2. 嵌套语法

Stylus的嵌套语法让CSS结构更清晰，减少了重复代码：

.weui-uploader
  .weui-uploader__hd
    display flex
    padding-bottom 12px
    align-items center
    .weui-uploader__title
      flex 1
    .weui-uploader__info
      color $weui-fg-2

编译后的CSS：

.weui-uploader .weui-uploader__hd {
  display: flex;
  padding-bottom: 12px;
  align-items: center;
}
.weui-uploader .weui-uploader__hd .weui-uploader__title {
  flex: 1;
}
.weui-uploader .weui-uploader__hd .weui-uploader__info {
  color: rgba(0,0,0,0.3);
}

3. 父选择器引用

使用 & 符号引用父选择器，处理伪类和伪元素非常方便：

.weui-cells
  &::before
    content ""
    position absolute
    left 0
    right 0
    height 1px
    background-color $weui-fg-3
    z-index 2

四、核心CSS布局技巧

1. 移动端滚动优化

.page {
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

-webkit-overflow-scrolling: touch 这个属性非常实用，它能让移动端滚动更流畅，有回弹效果，提升用户体验。

2. 弹性布局应用

上传区域的标题和数量信息采用了flex布局，实现两端对齐：

.weui-uploader__hd {
  display: flex;
  align-items: center;
}
.weui-uploader__title {
  flex: 1;
}

3. 多图上传布局

图片上传区域使用了经典的浮动布局实现多列效果：

.weui-uploader__file {
  float: left;
  margin-right: 8px;
  margin-bottom: 8px;
  width: 96px;
  height: 96px;
}

配合父容器的负margin处理：

.weui-uploader__bd {
  margin-bottom: -8px;
  margin-right: -8px;
  overflow: hidden;
}

这种技巧可以完美解决子元素margin溢出的问题。

五、实战问题与解决方案

1. 1px边框问题

在移动端高清屏幕上，1px边框可能会显示成2px。WeUI的解决方案是使用伪元素和transform：

.weui-cells::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background-color: rgba(0,0,0,0.1);
  z-index: 2;
}

2. 图片自适应显示

.weui-uploader__file {
  background: url("https://weui.io/images/pic_160.png") no-repeat 50%;
  background-size: cover;
}

background-size: cover 确保图片铺满容器且不变形，非常适合图片预览场景。

六、总结与思考

通过学习WeUI-Uploader的源码，我收获了以下几点：

语义化HTML ：合理使用标签和类名，提高代码可读性和可维护性
BEM命名规范 ：让CSS结构更清晰，避免样式冲突
Stylus预处理 ：变量、嵌套等特性大幅提高开发效率
移动端布局技巧 ：flex和float的灵活运用，滚动优化等
细节处理 ：1px边框、图片显示等问题的解决方案

这些技巧不仅适用于上传组件，也可以应用到其他移动端UI开发中。建议大家在实际项目中多借鉴优秀UI库的实现方式，不断积累经验。