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

本文主要是介绍小程序实现剪贴蒙版样式效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

日常开发中，我们经常遇到剪贴蒙版样式的进度条效果，通过限制上方图层的显示长度，达到视觉差的效果。代码里主要通过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/

更多精彩欢迎关注微信号：春风十里不如认识你
一起学习，一起进步，欢迎上车，有问题随时联系，一起解决！！！