小程序实现剪贴蒙版样式效果

日常开发中，我们经常遇到剪贴蒙版样式的进度条效果，通过限制上方图层的显示长度，达到视觉差的效果。代码里主要通过overflow:hidden的属性，元素的内容若超出了给定的宽度和高度，那么超出的部分将会被隐藏。

例如：
这张图可以分为三层，
最低层的背景色+加上底部的文字

中间层是张进度条的图片，根据不同进度长短覆盖在底层上面

最上面还有一行白色的文字，位置跟底层的文字重合，通过限制长度部分显示左边内容，形成一段文字两种颜色的视觉差。

  <view class="container">
    <!-- 垫底文字 -->
    <text>这是一段文字</text>
    <!-- 进度条图片 -->
    <image class="ic-progress" style="width: {{percent}};" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../img/ic_progress.png" />
    <!-- 白色文字内容区，与垫底文字位置重合 -->
    <view class="upTxt" style="width: {{percent}};">
      <text class="txt">这是一段文字</text>
    </view>
  </view>

.container{
  width: 460rpx;
  height: 50rpx;
  line-height: 50rpx;
  position: relative;
  background: rgba(247,29,81,0.1);
  border-radius: 25rpx;
  font-size: 28rpx;
  color: #F71D51;
  text-align: center;
  margin-top: 100px
}

.upTxt, .ic-progress {
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0rpx;
  height: 50rpx;
  line-height: 50rpx;
  border-radius: 25rpx;
  text-align: center;
}

.txt{
  display: inline-block;
  width: 460rpx;
  height: 50rpx;
  border-radius: 25rpx;
  color: #fff;
  text-align: center;
}

js代码里设置不同的percent百分比可以看出不同的效果。
非常简单方便的一个处理方法。

欢迎关注我的个人博客：https://www.manjiexiang.cn/