uniapp 冒泡

uniapp 

<template>
	<!-- 显示排序结果样式 -->
	<view class="content">
		<view class="text-area">
			<text class="title" style="margin-top: 200%; font-size: 44rpx; color: #DD524D;">{{show}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//数组
				show: [9, 5, 8, 9, 3, 8, 4, 2, 5, 6, 1, 7]//12
			}
		},
		onLoad() {
			//加载时启动冒泡排序方法
			this.bubbleSorting(this.show)
		},
		methods: {
			//冒泡排序方法
			bubbleSorting(data) {
				var a = data;//获取到的数组，赋值给了a，
				//声明一个变量j，从0开始计数；  j小于a.length,j小于a-1数组的长度；  j加一
				for (var j = 0; j < a.length - 1; j++) {
					//声明一个变量i，从0开始计数； i小于a.length,j小于a-1数组的长度；i加一
					for (var i = 0; i < a.length - 1; i++) {
						//判断a的第i个值是否大于等于a的第i+1个值
						if (a[i] <= a[i + 1]) {
							// console.log("上一个比一个小，不交换")
						} else {
							debugger
							//当上一个比下一个大的
							//声明一个number变量被a的第i个值赋值，
							var number = a[i]
							//a的第i个值被a的i+1个值给赋值，
							a[i] = a[i + 1]
							//a的第i+1个的值被number给赋值，
							a[i + 1] = number
						}
					}
				}
				this.show = a;
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>