小程序實現剪貼蒙版樣式效果

日常開發中，我們經常遇到剪貼蒙版樣式的進度條效果，通過限制上方圖層的顯示長度，達到視覺差的效果。代碼裏主要通過overflow:hidden的屬性，元素的內容若超出了給定的寬度和高度，那麼超出的部分將會被隱藏。

例如：

這張圖可以分爲三層，
最低層的背景色+加上底部的文字

中間層是張進度條的圖片，根據不同進度長短覆蓋在底層上面

最上面還有一行白色的文字，位置跟底層的文字重合，通過限制長度部分顯示左邊內容，形成一段文字兩種顏色的視覺差。

  <view class="container">
    <!-- 墊底文字 -->
    <text>這是一段文字</text>
    <!-- 進度條圖片 -->
    <image class="ic-progress" style="width: {{percent}};" src="../../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/

更多精彩歡迎關注微信號：春風十里不如認識你
一起學習，一起進步，歡迎上車，有問題隨時聯繫，一起解決！！！