微信小程序：排行榜页面模板

1 前言

在开发一款背单词的微信小程序时，为了加强用户的体验感，刺激用户积极学习，小程序中需要有排行榜的模块。通过打卡天数来排名，让用户有攀比学习的心里。具体的页面截图如下：

2 模板代码

wxml

<view class="container">
  <view class="rank-item" style="position: relative; left: 0rpx;">
      <!--头像-->
      <view class="rank-img">
        <image src="{{my_avatar_url}}"></image>
      </view>
      <!--展示昵称,以及贡献值-->
      <view>
        <view class="rank-name">{{my_nickname}}</view>
        <view class="rank-price">打卡次数：{{my_total_fee}}次</view>
      </view>
      <!--排名-->
      <view class="rank-uv">
        <text wx:if="{{my_rank!=0}}">您的排名：第 {{my_rank}} 名</text>
        <text wx:if="{{my_rank==0}}">抱歉您暂时未上榜</text>
      </view>
    </view>

  <view wx:for="{{dataList}}" wx:key="item" class="rank_block">
    <view class="rank-item">
      <!--头像-->
      <view class="rank-img">
        <image src="{{item.avatarUrl}}"></image>
      </view>
      <!--展示昵称,以及贡献值-->
      <block>
        <view class="rank-name">{{item.name}}</view>
        <view class="rank-price">打卡次数：{{item.login_day_num}}次</view>
      </block>
      <!--排名-->
      <view class="rank-uv">
        <text wx:if="{{item.rank>3}}">第 {{item.rank}} 名</text>
        <image src="/images/rank{{item.rank}}.png" wx:if="{{item.rank<=3}}" />
      </view>
    </view>
  </view>
</view>

wxss

page {
    background-color: #fbf9fe;
  }
  
  .container {
    width: 100%;
    margin-bottom: 80rpx;
    margin-top: 10rpx;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  
  .rank-item {
    height: 200rpx;
  width: 750rpx;
  background: #fff;
  margin-bottom: 8rpx;
  padding: 20rpx 20rpx 20rpx 50rpx;
  box-sizing: border-box;
  position: relative;
    
  }
  
  .rank-item .rank-img {
    width: 100rpx;
    height: 100rpx;
    float: left;
    margin-right: 50rpx;
    position: relative;
  }
  
  .rank-item .rank-img image {
    position: absolute;
    border-radius: 50%;
    width: 100rpx;
    height: 100rpx;
    top: 0;
    left: 0;
  }
  
  .rank-item .rank-name {
    font-size: 32rpx;
    height: 50rpx;
    line-height: 50rpx;
    color: #4e5b65;
    font-weight: bold;
  }
  
  .rank-item .rank-full {
    font-size: 32rpx;
    height: 100rpx;
    line-height: 100rpx;
    color: #4e5b65;
  }
  
  .rank-item .rank-price {
    height: 40rpx;
    line-height: 40rpx;
    margin-top: 10rpx;
    font-size: 24rpx;
    color: #d55a4a;
  }
  
  .rank-item .rank-uv text {
    font-size: 38rpx;
    position: absolute;
    height: 100rpx;
    line-height: 100rpx;
    bottom: 20rpx;
    right: 20rpx;
    color: #777;
  }
  
  .rank-item .rank-uv image {
    position: absolute;
    width: 100rpx;
    height: 100rpx;
    bottom: 20rpx;
    right: 20rpx;
  }
  
  .rank_block{
    margin-top: 10rpx;
  }
  

js

Page({
    data: {
        dataList: [],
        my_avatar_url:'',
        my_nickname:'',
        my_total_fee:'',
        my_rank:0,
    },

    onl oad: function () {
        this.get_rank_list();
        
    },
    onShow: function () {
        this.get_rank_list();
  },
    onPullDownRefresh: function () { //下拉刷新
        wx.stopPullDownRefresh();
        this.get_rank_list();
    },
    get_rank_list: function(){
        var that = this;
       that.setData({
           dataList:
           my_avatar_url:
           my_nickname:
           my_total_fee:
           my_rank:
       })
	},
    
})

ps：setData中的内容需要自己从后端获取后赋值到页面！ 图片素材：

3 结语

其实排行榜最早的发明也是因为商业目的，想借由人性的共趋性来制造商机，这点跟打折吸引消费者有着异曲同工。然而跟所有的游戏一样，玩久了参与者发现了游戏规则外的空间，制造者发现了它额外的价值，于是作弊的事情悄悄地发生了。 其实在实体的年代里，排行榜还是有它必要的存在性，尤其在资讯告知下，排行榜的确是消费者重要的资讯。虽然消费者也渐渐明白排行榜中蕴藏了太多商业介入，然而在媒体是主动的年代里，有钱的厂家可以用预算强迫洗脑，大多数的消费者也渐渐地失去判断力。在这个数位年代里消费者不再是被动的了，而网络媒体还用着排行榜的伎俩，他们能支撑多久呢。在网络年代里提供人们一个新的生活态度，因为大众族群是由许多小众群众组成的，有长远思考的数位媒体是很乐意提供出给使用者容易搜寻各种资料的工具，那才是数位业最大的商机。点阅率的排行榜是其中工具里面比较不重要的一项，因为以点阅率排行榜来谋生往往是一个不能长久去经营的策略，如果过度偏重它最后会赔了全局。诚实地说，在音乐的网络世界里，作假的排行榜比比皆是，有的是主动造局，有的是被动地走到这个局面。然而全盘的检讨是不是网络媒体太看重排行榜这个数位年代以前的旧价值观呢。如果数位平台的经营者价值观是旧的，那么使用者流向别处是必然的结局。