用uview写一个排行榜

好的，我可以给你提供一个简单的排行榜示例，使用uView的uni-list组件和uni-badge组件来实现：

<template>
  <view>
    <ul>
      <li v-for="(item, index) in rankList" :key="index">
        <view class="rank-item">
          <view class="rank-num">{{ index + 1 }}</view>
          <view class="rank-info">
            <view class="rank-avatar">
              <image :src="item.avatar"></image>
            </view>
            <view class="rank-name">{{ item.name }}</view>
          </view>
          <uni-badge :count="item.score" type="text"></uni-badge>
        </view>
      </li>
    </ul>
  </view>
</template>

<script>
export default {
  data() {
    return {
      rankList: [
        {
          name: '张三',
          avatar: '/static/avatar1.jpg',
          score: 100
        },
        {
          name: '李四',
          avatar: '/static/avatar2.jpg',
          score: 90
        },
        {
          name: '王五',
          avatar: '/static/avatar3.jpg',
          score: 80
        }
      ]
    }
  }
}
</script>

<style>
.rank-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
}

.rank-num {
  font-size: 32rpx;
  color: #999;
  margin-right: 20rpx;
}

.rank-info {
  display: flex;
  align-items: center;
}

.rank-avatar {
  width: 80rpx;
  height: 80rpx;
  margin-right: 20rpx;
}

.rank-avatar image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.rank-name {
  font-size: 28rpx;
  color: #333;
}
</style>

在上面的代码中，我们首先定义了一个rankList数组，里面存储了排行榜的数据，包括名称、头像和分数。

然后在模板中，我们使用v-for指令遍历rankList数组，渲染出每个排名项的信息。在每个排名项中，我们使用uni-badge组件来显示分数，并且使用uni-list组件来实现列表的显示效果。

最后，我们在样式中定义了每个排名项的布局和样式。