小程序实现录音动态加载样式

如图

简易代码

wxml

<view class='sound-waves'>
	<view wx:for="{{radomheight}}" wx:key="item" style='height:{{item}}rpx;margin-top:-{{item/2}}rpx'>
        </view>
	<view style='clear:both;width:0;height:0;'>
        </view>
</view>

<button bindtap="myradom">button</button>

js

const InitHeight = [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50]

Page({
	data: {
		radomheight: InitHeight,
	},

	myradom() {
		
		let buttonStatus = !buttonStatus
		let _radomheight = this.data.radomheight;
		
		for (var i = 0; i < this.data.radomheight.length; i++) {
			_radomheight[i] = (100 * Math.random().toFixed(2)) + 10;
		}
		this.setData({
			radomheight: _radomheight
		});
		
		setTimeout(() => {
			this.myradom();
		}, 500);

	}

});

css

button {
	margin: 50rpx 200rpx;
        }
.sound-waves {
	width: 100%;
	box-sizing: border-box;
	padding-left: 10%;
	margin-top: 80rpx;
	height: 80rpx;
	text-align: center;
        }

.sound-waves view {
	transition: all 0.5s;
	width: 1%;
	margin-left: 1.5%;
	margin-right: 1.5%;
	height: 160rpx;
	background-color: #aaa;
	float: left;
        }