移动端开发小工具

😊序言

本人最近从实际开发中感觉到有些工具可能有用，特此收集供大家参考

🦴实际小工具

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; /* 设置或检索伸缩盒对象的子元素的排列方式 */  
		}