微信小程序之排行榜功能实现

一、效果演示

演示的效果如上，界面没有很好看，但是该有的功能都实现了，界面的话可以自己修改wxss代码。

二、源代码

ranking.wxml

<view class="rank-page">
    <!-- 顶部栏 -->
    <view class="page-head">
        <view class="page-title">YOUTH LEARNING</view>    
    </view>
    <!-- 顶部滑块 -->
    <view class="rank-types">
        <view
            class="rank-type {{currentRankType == rankType ? 'true' : null }}"
            data-rank-type="{{rankType}}" bindtap="changeRankType"
            wx:for="{{rankTypes}}" wx:key="idx" wx:for-item="rankType">{{rankType}}
        </view>
    </view>

    <!-- 三分类 根据currentRankType动态渲染页面内容 -->
    <!-- 学习率排名页面 -->
    <view>
      <view wx:if="{{currentRankType == '学习率排名'}}">
        <view class="rank-items" >
        <block wx:for="{{rankItems}}" wx:key="idx" wx:for-index="idx" wx:for-item="rank">
            <view class="rank">      
                <view class="rank-data">
                    <view class="school-meta">
                        <view class="rank-num">{{idx + 1}}</view>
                        <view class="school-name">{{rank.school}}</view>
                        <view class="study_ratio">{{rank.studyNumber}}/{{rank.totalNumber}}</view>
                        <view class="study_rates">{{rank.rates}}</view>
                    </view>
                </view>
            </view>
        </block>
      </view>
      </view>
      <!-- 学院积分排名页面 -->
      <view wx:elif="{{currentRankType == '学院积分排名'}}">
        <view class="rank-items">
        <block wx:for="{{rankItems}}" wx:key="idx" wx:for-index="idx" wx:for-item="rank">
            <view class="rank">   
                <view class="rank-data" >
                    <view class="school-meta">
                        <view class="rank-num">{{idx + 1}}</view>
                        <view class="school-name">{{rank.school}}</view>
                        <view class="study_ratio">{{rank.studyNumber}}/{{rank.totalNumber}}</view>
                        <view class="study_rates">{{rank.totalPoints}}</view>
                    </view>
                </view>
            </view>
        </block>
      </view>
      </view>
      <!-- 个人积分排名页面 -->
      <view wx:else="{{currentRankType == '个人积分排名' ?'true':'false'}}">
        <view class="rank-items">
        <block wx:for="{{rankItems}}" wx:key="idx" wx:for-index="idx" wx:for-item="rank">
            <view class="rank">
                <view class="rank-data">
                    <view class="school-meta">
                        <view class="rank-num">{{idx + 1}}</view>
                        <view class="school-name">{{rank.school}}</view>
                        <view class="study_ratio">{{rank.name}}</view>
                        <view class="study_rates">{{rank.totalPoints}}</view>
                    </view>
                </view>
            </view>
        </block>
      </view>
    </view>
</view>
</view>

ranking.wxss

/* 顶部样式文字 */
.page-head {
  background-color: rgb(250, 133, 133);
}
.page-title {
  font-size: 52rpx;
  text-align: center;
}

/* 导航框样式 */
.rank-types {
  height: 7vh;
  margin-top: 10rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  text-align: center;
  background-color: rgb(250, 171, 171);
  border-radius: 5px;
  
}

.rank-type {
  flex: 1;
  font-size: 35rpx;
  border-bottom: 2px solid #eaeaea;
  padding-bottom: 10rpx;
  padding-top: 15rpx;
  transition: border .3s;
  color: rgb(85, 81, 81);
}

.rank-type{
  background-color: rgb(247, 67, 91);
  border-bottom-color: #3cc51f;
}

/* 榜单内容样式 */
.rank-items{
  margin-top: -20px;
  background-color: rgb(236, 83, 83);
  border-radius: 10px;
}

.rank {
  margin-top: 10px;
  flex-direction: row;
  height: 40px;
  font-size: 32rpx;
  border-bottom: 1px solid #eaeaea;
  padding-bottom: 30rpx;

}

.school-meta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #ddd;
}

.school-meta{
display: flex;
height: 100%;
color: #333;
text-align: center;
}

.rank-num {
  width: 15%;
  color: #333;
  flex-direction: column;
  text-align: center;
  line-height: 80rpx;
}

.school-name {
  width: 35%;
  color: #333;
  flex-direction: column;
  text-align: center;
  line-height: 80rpx;
}

.study_ratio {
  width: 28%;
  font-size: 28rpx;
  color: #333;
  text-align: center;
  line-height: 80rpx;
}

.study_rates{
  width: 20%;
  font-size: 28rpx;
  color: #333;
  text-align: center;
  line-height: 80rpx;
}

.rank-meta {
  color: #ddd;
  font-size: 28rpx;
}

ranking.js

rankItems的数据格式如下，可使用下面的数据用于测试，需要手动修改部分js代码。

const rankItems = [
  {"createTime":"2022-10-22T14:10:15","id":7,"rates":0.89,"school":"经管学院","studyNumber":800,"totalNumber":900,"totalPoints":1100,"updateTime":"2022-11-05T17:10:41"},
  {"createTime":"2022-10-22T14:10:15","id":7,"rates":0.89,"school":"信息学院","studyNumber":800,"totalNumber":900,"totalPoints":1100,"updateTime":"2022-11-05T17:10:41"},
  {"createTime":"2022-10-22T14:10:15","id":7,"rates":0.89,"school":"机电学院","studyNumber":800,"totalNumber":900,"totalPoints":1100,"updateTime":"2022-11-05T17:10:41"},
  {"createTime":"2022-10-22T14:10:15","id":7,"rates":0.89,"school":"外国语学院","studyNumber":800,"totalNumber":900,"totalPoints":1100,"updateTime":"2022-11-05T17:10:41"},
  {"createTime":"2022-10-22T14:10:15","id":7,"rates":0.89,"school":"软件学院","studyNumber":800,"totalNumber":900,"totalPoints":1100,"updateTime":"2022-11-05T17:10:41"},
  {"createTime":"2022-10-22T14:10:15","id":7,"rates":0.89,"school":"土建学院","studyNumber":800,"totalNumber":900,"totalPoints":1100,"updateTime":"2022-11-05T17:10:41"},
]

// pages/ranking/ranking.js

Page({
  onLoad: function() {
    // 加载当前排名分类页面的数据内容
    this.loadRanking()
  },
  data: {
      // 存储每条排名信息
      rankItems: [],
      // 控制模态框的显示
      modalHidden: true,
      // 顶部分类排名滑块名称
      rankTypes: ['学习率排名', '学院积分排名', '个人积分排名'],
      // 页面初始化加载的分类排名页面
      currentRankType: '学习率排名'
  },

  // 改变分类排名页面
  changeRankType: function(e) {
      wx.showToast({
        title: '加载中',
        icon: 'loading'
      })  
      // 获取当前点击的排名分类滑块名称 
      var rankType = e.currentTarget.dataset.rankType
      console.log(rankType); //'学习率排名'或'学院积分排名',或'个人积分排名']
      this.setData({
        // 修改分类排名页面
        currentRankType: rankType
      })
      // 加载当前排名分类页面的数据内容
      this.loadRanking()
  },

  // 加载当前排名分类页面的数据内容
  loadRanking: function() {
      var self = this
      // var url = util.rankTypeMap(this.data.currentRankType)
      // console.log(self.data.rankTypes);
      // console.log(self.data.rankTypes.slice(1,2)[0]);
      // 当当前点击的排名分类页面名称为"学习率排名"时执行下面这个分支 发请求获取"学习率排名"的内容
      if (self.data.currentRankType === self.data.rankTypes.slice(0,1)[0]){
        wx:wx.request({
          url: 'http://xxx:xxx/xxxx/sortByRates',
          method: "GET",
          success: (result) => {
            console.log(result.data);
            this.setData({
              rankItems:result.data.data
            })
          },
          fail: (res) => {},
          complete: (res) => {},
        })
      }
      // console.log(self.data.currentRankType);
      // 当当前点击的排名分类页面名称为"学院积分排名"时执行下面这个分支 发请求获取"学院积分排名"的内容
      if (self.data.currentRankType === self.data.rankTypes.slice(1,2)[0]){
        wx:wx.request({
          url: 'http://xxx:xxx/xxxx/sortByPoints',
          method: "GET",
          success: (result) => {
            console.log(result.data);
            this.setData({
              rankItems:result.data.data
            })
          },
          fail: (res) => {},
          complete: (res) => {},
        })
      }
      // console.log(self.data.rankTypes.slice(2,3)[0]);
      // 当当前点击的排名分类页面名称为"个人积分排名"时执行下面这个分支 发请求获取"个人积分排名"的内容
      if (self.data.currentRankType === self.data.rankTypes.slice(2,3)[0])
      {
        wx:wx.request({
          url: 'http://xxx:xxx/xxxx/queryUserPointsSort',
          method: "GET",
          success: (result) => {
            console.log(result.data);
            this.setData({
              rankItems:result.data.data
            })
          },
          fail: (res) => {},
          complete: (res) => {},
        })
      }
  },
  // 在加载数据完后处理模态框的显示
  afterLoading: function(success) {
      wx.hideToast()
      if (!success) this.modalShow()
  },
  // 模态框隐藏函数
  modalHide: function(e) {
      this.setData({
          modalHidden: true
      })
  },
  // 模态框显示函数
  modalShow: function(e) {
      this.setData({
          modalHidden: false
      })
  }
})

三、项目demo地址

本项目的github项目地址点击跳转,欢迎各位浏览、star💸。

四、参考链接

该排行榜功能主要参考自项目gold-wechat-collection-ranking中的实现。