css的attr函数与伪元素::after妙用实现自定义价格尾数

需求描述

大家有没有注意过，在在网上购物的时候，经常能看到产品价格会放大整数部分、缩小小数部分，除了价格以外，还有一些评分等都有类似的效果，如下图所示：

从上图可以看到，很多的商城都会采用放大整数部分缩小小数部分，而且有些购票平台的评分也会采用这种方式，这种好处就是：让消费者倾向于关注价格左侧的数字，通过视觉强化整数部分，降低消费者对零头的敏感度，利用这种心理偏差，让价格显得更低。

要想实现这种效果，方法有很多，这里给大家介绍一下非常简单的用法，使用attr函数配合::before及::after创建伪元素的方式，来实现介绍的这种效果，大家可以看下这种方式是不是最容易实现的。

attr函数

函数介绍

attr() 是 CSS 中的函数，用于获取 HTML 元素的属性值，并将其用作 CSS 属性的值。
attr() 理论上能用于所有的 CSS 属性但目前支持的仅有伪元素的 content 属性，其他的属性和高级特性目前是实验性的。
并且该函数的浏览器兼容良好，在微信小程序中也是支持的。
在MDN有attr的使用说明：https://developer.mozilla.org/zh-CN/docs/Web/CSS/attr

功能用法

<div class="box" data-text="副标题">标题文本</div>

.box{
	font-size: 36rpx;
	font-weight: bold;
	display: flex;
	align-items: flex-end;
	&::after{
		content: attr(data-text);
		font-weight: lighter;
		font-size: 28rpx;
		color:#666;
		margin-left: 10rpx;
	}
}

如上所示，在HTML标签上添加一个自定义属性data-text，在css的after伪类元素中，可以在content属性中，通过attr函数可以获取到标签属性中的值。

实际应用

如图所示，商品价格的￥符及价格字符大小都是一样的，想要将价格前面的￥符及小数位缩小，那么就可以使用attr函数结合::before和::after创建伪类元素来实现。

<div class="price-wrap" data-suffix=".98">598</div>

.price-wrap{
  color: #FF0F23;
  font-size: 32rpx;
  &::before{
	  font-size: 22rpx;
	  content: "￥";
  }
  &::after{
	  font-size: 22rpx;
	  content:attr(data-suffix);
  }
}

如上代码所示，在标签属性中设置价格小数位，在css内通过:after伪原生通过attr函数向后追加小数位，并将字符设置的小几号，而人民币符号￥，就可以直接使用before追加了。

在真实的场景下，接口一般返回的价格是以“分”位单位的，而且你肯定不能手动拆分整数和小数，可以通过功能性的函数来拆分。

可以让AI给你写个方法，传入两个值，第一个值是整数，第二值如果传入0，那么就将这个整数除100后，只要整数部分，如果第二个值传入1，那么就将整数除100后，只要小数部分，包含小数点

function processNumber(num, option=0) {
  if (option === 0) {
    // 获取整数部分
    return Math.floor(num / 100);
  } else if (option === 1) {
    // 获取小数部分（包含小数点）
    const decimal = (num / 100) - Math.floor(num / 100);
    return decimal.toFixed(2).substring(1); // 确保有两位小数并保留小数点
  } else {
    return "无效的选项，第二个参数只能是0或1";
  }
}

通过这个函数，在模板层使用的时候就可以像下面这样了。

<div class="price-wrap" :data-suffix="processNumber(59898,1)">{{processNumber(59898,0)}}</div>

如上所示就是最终效果了，我们将￥符号及小数位进行了缩小，就是借助了css的attr函数进行的实现，如果大家有更好的场景应用，也可以在评论区为我留言，如果又学会了新技巧，不要忘了点赞关注哦，我是咸虾米感谢大家的观看。