As shown in figure

Simple code

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>
Copy the code
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() {
		
		letbuttonStatus = ! buttonStatuslet _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); }});Copy the code
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.5 s;
	width: 1%;
	margin-left: 1.5%;
	margin-right: 1.5%;
	height: 160rpx;
	background-color: #aaa;
	float: left;
        }
Copy the code