欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

微信小程序在WXS中使用split实现金额小数点前的数比后面的大的效果

程序员文章站 2022-06-28 19:01:49
摘要:在这次微信小程序开发中,有一个关于价格的样式调整。小数点前的数值比小数点后面的的,主要是突出一下。由于接口返回的只有一个字段,所以前端要利用split对相关参数的值进行分割,再配合wxss样式实现最终效果…大纲一、原型二、思路分析三、split()方法3.1、新增split 类型3.3、细节优化3.3.1、方案一:整数时不显示小数3.3.2、方案二:统一保留两位有效小数四、demo源码五、其他说明一、原型....

摘要:
在这次微信小程序开发中,有一个关于价格的样式调整。小数点前的数值比小数点后面的的,主要是突出一下。由于接口返回的只有一个字段,所以前端要利用split对相关参数的值进行分割,再配合wxss样式实现最终效果…

大纲

 

一、原型

可能标题描述的不是太清晰,那我们就看下原型图吧。如图:UI原型.png

微信小程序在WXS中使用split实现金额小数点前的数比后面的大的效果

实际上就是:小数点前的数字比小数点后面的数字大

二、思路分析
通常情况,金额(价格)是一个字段。比如:price,所以不存在小数点前后字号不一致的问题。但既然原型是这样画的,那要怎么实现呢?让后端改接口,改成两个字段?这后端肯定是不干的且也不合理!所以,只能靠前端来实现了。

那前端怎么实现呢?看官会发现 小数点 是分界线。所以,想办法把小数点前后的数字分别取到就解决了问题。

三、split()方法
在js中,如果要把数字15.32变成15、.和32的话,最简单的方法就是使用split()方法。在微信小程序中也同样适用。

昨天在format.wxs文件中封装了一个名叫formatValue的函数,现在把split也添加进去。

这里直接上源码了

/*
 * @Description: 通用格式处理
 * @Author: wsp(wsp959550@163.com)
 * @Date: 2020-04-20 10:33:42
 * @LastEditors: wsp(wsp959550@163.com)
 * @LastEditTime: 2020-04-28 22:35:30
 */
/**
 * @author: wsp(wsp959550@163.com)
 * @description: 格式化(价格、销量、佣金)
 * @param {Number} value
 * @param {String} type 类型
 * @return {void}
 * @Date: 2020-04-20 10:35:07
 */
function formatValue(value, type) {
  if (typeof value === 'string') {
    if (value.match('¥')) {
      var reg = getRegExp('¥', 'g')
      value = value.replace(reg, '')
    }
  }
  var result = value
  switch (type) {
    case 'price': // 普通价格
      // 商品价格:当商品金额小于10000时,保留2位小数显示;大于等于10000元时,则显示为1.0万的格式,即保留1位小数
      result = Number(value)
      if (result < 10000) {
        result = result.toFixed(2)
      } else {
        result = (result / 10000).toFixed(1) + '万'
      }
      break
    case 'sold': // 已售
      // 已售:当虚拟销小于10000件时,显示完全;当虚拟销量大于等于10000件,则显示为已售1.0万件的格式,即保留1位小数
      result = Number(value)
      if (result >= 10000) {
        result = (result / 10000).toFixed(1) + '万'
      }
      break
    case 'commission': // 佣金
      // 佣金:当佣金小于10时,保留2位小数显示;大于等于10元时,保留1位有效数字;大于等于100时,保留为整数;大于等于1000时,显示为:赚¥999+
      result = Number(value)
      if (result < 10) {
        result = result.toFixed(2)
      } else if (result >= 10 && result < 100) {
        result = result.toFixed(1)
      } else if (result >= 100 && result < 1000) {
        result = Math.floor(result)
      } else {
        return '999+'
      }
      break
    case 'coupon': // 优惠券
      result = Number(value / 100)
      break
    case 'split': // 分割
      result = ('' + result).split('.')
      // result = Number(result).toFixed(2).split('.') // 保留两位小数的方案
      // console.log('result=', result, JSON.stringify(result))
      break
  }
  return result
}
module.exports = {
  formatValue: formatValue
}

然后在需要使用的wxml页面中先引入wxs然后再使用{{wxs.formatValue(‘值’, ‘split’)}}即可。示例代码如下:
核心wxml代码:

<!-- 引入格式化函数 yiling 20200420 10:53:46 start -->
<wxs src="../../utils/format.wxs" module="wxs"></wxs>
<!-- 引入格式化函数 yiling 20200420 10:53:46 end -->
...... /* 省略若干项目代码 */
<view class="price">
  ¥<text class="price__big">{{wxs.formatValue(price, 'split')[0]}}</text>.<text>{{wxs.formatValue(price, 'split')[1]}}</text> /* 处理价格 */
</view>
...... /* 省略若干项目代码 */

微信小程序在WXS中使用split实现金额小数点前的数比后面的大的效果

是不是有点小尴尬???至于为什么会出现这种情况是因为:166是一个整数,使用split(’.’)分割后数组长度为1,此时{{wxs.formatValue(166, ‘split’)[1]}}不存在。 所以,出现上述情况就很好理解了。

解决方案有两种:

  1. 方案一:整数时不显示小数点;
  2. 方案二:统一保留两位有效小数

选择的方案不同,我们的代码写法也会有所区别,下面来一一演示。

3.3.1、方案一:整数时不显示小数

将原来的.替换成

<text wx:if="{{wxs.formatValue(price, 'split')[1]}}">.</text>

即可。

3.3.2、方案二:统一保留两位有效小数
此时又有两种方法。
第一种:不修改wxs中的代码,使用现有代码组合的方式实现;
第二种:修改wxs中的代码。
后一种一劳永逸,将原来的(’’ + result).split(’.’)替换成Number(result).toFixed(2).split(’.’)即可。最终效果如图:统一保留两位有效小数.png
微信小程序在WXS中使用split实现金额小数点前的数比后面的大的效果

四、demo源码

demo源码已上传到了github上,如果看官需要研究源码,可以点击下面的链接进行访问并下载。访问源码

源码中会有必要注释和本篇文章中的示例。若有疑问可与艺灵联系,方式见下方二维码或右侧。

五、其他说明

原文首发于艺灵设计,转载请注明来源,谢谢。

本文地址:https://blog.csdn.net/qq_42543264/article/details/107358722

相关标签: 小程序