用uniapp写一个排行榜

以下是一个简单的用uniapp写的排行榜示例：

1. 定义一个rankList数组，存储排行榜的数据

2. 在页面中使用v-for指令循环遍历rankList数组，渲染排行榜列表

3. 使用flex布局对排行榜进行样式布局，设置每个排行榜项的样式

4. 在页面中添加一个按钮，点击按钮可以对排行榜进行排序，按照分数从高到低排序

5. 在按钮的点击事件中使用sort方法对数组进行排序，重新渲染排行榜列表

代码示例：

<template>
<view class="rank-list">
<view class="title">排行榜</view>
<view class="btn" @click="sortRankList">排序</view>
<view class="rank-item" v-for="(item, index) in rankList" :key="index">
<view class="rank">{{index + 1}}</view>
<view class="name">{{item.name}}</view>
<view class="score">{{item.score}}</view>
</view>
</view>
</template>

<script>
export default {
data() {
return {
rankList: [
{ name: '张三', score: 80 },
{ name: '李四', score: 90 },
{ name: '王五', score: 70 },
{ name: '赵六', score: 85 },
]
}
},
methods: {
sortRankList() {
this.rankList.sort((a, b) => b.score - a.score)
}
}
}
</script>

<style scoped>
.rank-list {
display: flex;
flex-direction: column;
align-items: center;
}

.title {
font-size: 24px;
margin-bottom: 20px;
}

.btn {
width: 100px;
height: 40px;
background-color: #409EFF;
color: #fff;
text-align: center;
line-height: 40px;
border-radius: 20px;
margin-bottom: 20px;
}

.rank-item {
display: flex;
align-items: center;
width: 300px;
height: 60px;
background-color: #F5F5F5;
border-radius: 10px;
margin-bottom: 10px;
}

.rank {
width: 30px;
height: 60px;
background-color: #409EFF;
color: #fff;
text-align: center;
line-height: 60px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}

.name {
flex: 1;
text-align: center;
}

.score {
width: 60px;
text-align: center;
}
</style>