微信小程序在WXS中使用split实现金额小数点前的数比后面的大的效果 |
您所在的位置：网站首页 › 微信昵称字体一大一小怎么打的 › 微信小程序在WXS中使用split实现金额小数点前的数比后面的大的效果 |
微信小程序在WXS中使用split实现金额小数点前的数比后面的大的效果
|
摘要： 在这次微信小程序开发中，有一个关于价格的样式调整。小数点前的数值比小数点后面的的，主要是突出一下。由于接口返回的只有一个字段，所以前端要利用split对相关参数的值进行分割，再配合wxss样式实现最终效果… 大纲 一、原型二、思路分析三、split()方法 3.1、新增split 类型3.3、细节优化 3.3.1、方案一：整数时不显示小数3.3.2、方案二：统一保留两位有效小数四、demo源码五、其他说明 一、原型可能标题描述的不是太清晰，那我们就看下原型图吧。如图：UI原型.png
实际上就是：小数点前的数字比小数点后面的数字大 二、思路分析 通常情况，金额（价格）是一个字段。比如：price，所以不存在小数点前后字号不一致的问题。但既然原型是这样画的，那要怎么实现呢？让后端改接口，改成两个字段？这后端肯定是不干的且也不合理！所以，只能靠前端来实现了。 那前端怎么实现呢？看官会发现 小数点 是分界线。所以，想办法把小数点前后的数字分别取到就解决了问题。 三、split()方法 在js中，如果要把数字15.32变成15、.和32的话，最简单的方法就是使用split()方法。在微信小程序中也同样适用。 昨天在format.wxs文件中封装了一个名叫formatValue的函数，现在把split也添加进去。 这里直接上源码了 /* * @Description: 通用格式处理 * @Author: wsp（[email protected]） * @Date: 2020-04-20 10:33:42 * @LastEditors: wsp（[email protected]） * @LastEditTime: 2020-04-28 22:35:30 */ /** * @author: wsp（[email protected]） * @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代码： ...... /* 省略若干项目代码 */ ¥{{wxs.formatValue(price, 'split')[0]}}.{{wxs.formatValue(price, 'split')[1]}} /* 处理价格 */ ...... /* 省略若干项目代码 */是不是有点小尴尬？？？至于为什么会出现这种情况是因为：166是一个整数，使用split(’.’)分割后数组长度为1，此时{{wxs.formatValue(166, ‘split’)[1]}}不存在。 所以，出现上述情况就很好理解了。 解决方案有两种： 方案一：整数时不显示小数点；方案二：统一保留两位有效小数选择的方案不同，我们的代码写法也会有所区别，下面来一一演示。 3.3.1、方案一：整数时不显示小数 将原来的.替换成 |
【本文地址】
今日新闻 |
推荐新闻 |