阅读 7

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

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

例如:

image.png

这张图可以分为三层,
最低层的背景色+加上底部的文字
image.png

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

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

  <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百分比可以看出不同的效果。
非常简单方便的一个处理方法。

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

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

关注下面的标签,发现更多相似文章
评论