😊序言
本人最近从实际开发中感觉到有些工具可能有用，特此收集供大家参考
🦴实际小工具
1.2位小数补全代码
一般来说涉及到支付模块，金额部分肯定是要自动用0补全2位小数的，我的主要逻辑是根据小数点来实现，之前搜了下其他的感觉比价麻烦，于是就决定自己写一个，这个方法的重点是，金额数据要先转字符串类型
var a = [{id: 1,price: '10'}, {id: 2,price: '20'}, {id: 3,price: '20.5'}, {id: 4,price: '20.58'}, {id: 5,price: '40.8'}]a.forEach(item => {//处理整数类型if (item.price.indexOf('.') == -1) {item.price = item.price + '.00'} else if (item.price.substring(item.price.length - 2, item.price.length - 1) == '.') { //处理一位小数item.price = item.price + '0'}})
2.弹性布局
场景：盒子高度固定的情况下，左边有介绍信息，右边是重要内容或者头像等，最好采用弹性布局，本例子中还采用了最大最小宽度来适配，是值得学习的一个例子，如果大家有其他方法，欢迎评论分享！
视图代码
<view class="container flex-space"><view class="text">这是描述信息水电费水电费水电费收到收到反倒是第三方</view><view class="info flex-center"><view><view class="title">重要信息</view><view class="title-info">这是次要信息或描述</view></view></view></view>
css样式代码
.container {padding: 30rpx;font-size: 14px;line-height: 4rem;height: 4rem;background-color: cornflowerblue;}.flex-space{display: flex;justify-content: space-between;align-items: center;}.flex-center{display: flex;justify-content: center;align-items: center;}.text{max-width: 45vw;color: aliceblue;line-height: 18px;}.info{padding: 20rpx;border: 1px solid white;border-radius: 20rpx;min-width: 10vw;}.title{font-size: large;font-weight: bold;color: aliceblue;margin: auto;text-align: center;line-height: 20px;margin-bottom: 10rpx;}.title-info{color: aliceblue;line-height: 20px;}
显示样式：
3.css小程序强制不换行
这个功能我们一般来说都会遇到，直接上代码
white-space: nowrap;
4.打折样式
只要做关于商城的项目，大家都有可能会碰到一个打折的效果，这其实是一个text的属性：
wxml代码：
<view class="item"><view class="origin">￥132</view><view class="current">￥80</view></view>
scss代码：
.item{margin: 20rpx;background-color: white;border-radius: 20rpx;padding: 20rpx;min-height: 20vh;display: flex;align-items: center;.origin{font-size: large;font-weight: bold;color: #F7831D;}.current{font-size: small;color: #C0C0C0;text-decoration: line-through;}}
效果图：
5.单行省略字体
这个需求是在开发书籍资料列表时用到
代码：
<view class="clom">方式方式的地方是发送到发的说法是大大方方收到收到方式单独</view>
.clom{width: 80vw;overflow: hidden; //超出的文本内容隐藏text-overflow: ellipsis;//超出用省略号表示white-space: nowrap;//不换行}
6.多行省略号
多行和单行就只有css的区别，这里我就只放css样式了
.clom{width: 100px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */-webkit-line-clamp: 2; /* 控制最多显示几行 */-webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */ }
