【页面案例汇总】微信小程序分数排名页面

【页面案例汇总】微信小程序分数排名页面，包含了基本的页面布局和排序算法。可以根据自己的需求进行修改和完善。

<template>
  <view class="container">
    <view class="title">分数排名</view>
    <view class="rank-list">
      <view v-for="(item, index) in rankData" :key="item.id" class="rank-item">
        <text class="rank-num">{{ index + 1 }}.</text>
        <text class="rank-name">{{ item.name }}</text>
        <text class="rank-score">{{ item.score }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      rankData: [
        { id: 1, name: '小明', score: 90 },
        { id: 2, name: '小红', score: 80 },
        { id: 3, name: '小刚', score: 95 },
        { id: 4, name: '小李', score: 85 },
        { id: 5, name: '小张', score: 75 },
      ],
    };
  },
  mounted() {
    this.sortRankData();
  },
  methods: {
    // 按分数降序排序
    sortRankData() {
      this.rankData.sort((a, b) => b.score - a.score);
    },
  },
};
</script>

<style>
.container {
  margin: 20px;
}

.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.rank-list {
  background-color: #eee;
  border-radius: 10px;
  padding: 10px;
}

.rank-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 5px 10px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.rank-num {
  font-size: 16px;
  margin-right: 10px;
}

.rank-name {
  flex-grow: 1;
  font-size: 16px;
  margin-right: 10px;
}

.rank-score {
  font-size: 16px;
  font-weight: bold;
}
</style>