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

已于 2022-11-16 17:19:42 修改
阅读量3.6k 收藏 36
点赞数 4
分类专栏： 小程序前端开发 文章标签： 微信小程序 css css3
于 2022-11-14 21:25:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/booze_/article/details/127845646
版权

文章

一、效果演示

演示的效果如上，界面没有很好看，但是该有的功能都实现了，界面的话可以自己修改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中的实现。

微信排行榜功能
wulong710的专栏
09-24 836
我参考网上的写的 private bgGroup: eui.Group = null; public bitmap: egret.Bitmap = null; private isRankClick: boolean = false; private rankingListMask: egret.Shape; private async initWX...
微信小程序《在线音乐排行榜》实现
03-16
总的来说，"微信小程序《在线音乐排行榜》实现"涵盖了前端开发的多个方面，包括UI设计、数据获取与处理、多媒体操作、页面导航以及用户交互。通过这个项目，开发者不仅能深入理解微信小程序的开发流程，还能提升在...
微信小程序 列表排行
03-30
微信小程序 列表排行表渲染具体开发方法： wx:for 在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。 默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item
微信小程序排行榜
weixin_33826609的博客
01-04 2057
　　哪类微信小程序使用量最多？小程序是附属在微信上，微信小程序排行榜跟微信的用户属性有很大的关系，微信用户对新闻资讯、情感、养生表现出了极大的兴趣，所有我们从新闻资讯小程序、视频小程序、情感类微信小程序、社交小程序、浏览器小程序、音乐小程序、外卖小程序、电台小程序等几个维度来分析 　　微信小程序使用量最多的是新闻资讯类的小程序 新闻资讯类小程序排名12345678910微信小程序名称腾讯*...
微信小程序行业热门的前10名排行版是什么？
最新发布
Program Han
04-07 687
全链路开发服务，支持微信/抖音/支付宝多端适配，定制化解决方案占比行业领先 ‌。
微信小程序排行榜模板
细肥尸丁
05-07 6948
微信小程序炫酷排行榜模板
微信小程序 13 排行榜的编写
小哞^同^学的技术博客
07-11 3349
先观察 设计稿 分析有哪些组件。并把它们 适当的写好。：整个 排行榜是 从左向右 滑动的，所以 必须要有这个 轮播图 组件。：图片组件。：文本组件。：视图区域组件，类似于 div，没有实际的 效果。解析：每个榜单的名字，都是随着 榜单 而存在的。所以 必须 把它 嵌套到 swiperItem 里面去。如果后端把数据处理的完美的话，肯定 不会 传过来 一个 乱序的 榜单，所以我们的 名次，就是遍历到第几个的计数。 13.2 css 的编写 -> 还是 先看 设计稿 然后 分析 首先 所有的音乐 都得
微信小游戏子域排行榜系统cocos示例程序，此示例中包含好友排行榜列表、群排行榜列表、上传得分、横向排行展示等功能。.zip
08-10
基于微信小程序开发的web系统，适合做毕业设计，课程设计作业，java，springboot等技术，源码完整，配置后可直接运行。 基于微信小程序开发的web系统，适合做毕业设计，课程设计作业，java，springboot等技术，源码...
cocosCreator微信小游戏排行榜的实现实例
02-21
在本文中，我们将深入探讨如何使用Cocos Creator来实现微信小游戏的排行榜功能，这涉及到子域与主域的交互以及JavaScript（JS）和TypeScript（TS）的编程实践。微信小游戏是一个基于微信平台的轻量级游戏应用，而...
微信小程序 实例汇总 完整项目源代码
11-01
4. **API调用**：微信小程序提供了丰富的API接口，如网络请求、地图、位置、媒体、文件、用户授权等，开发者可以利用这些API实现各种功能。 5. **组件化开发**：小程序支持组件化开发，如view、button、image、...
微信小程序仿微信运动步数排行(交互)
10-18
标签中的“小程序”、“运动步数排行”、“微信运动步数”表明了文章的主要内容将围绕微信小程序技术展开，并且重点在于实现运动步数排行功能的开发。 部分内容部分的知识点： 1. 微信小程序前端开发技术，包括WXML...
微信小程序橙色风格电影排行榜demo完整源码
12-02
微信小程序橙色风格电影排行榜demo完整源码微信小程序橙色风格电影排行榜demo完整源码
基于uni-app制作的IMDBTOP250电影排名系统的微信小程序前端.zip
12-13
计算机类毕设源码
步数排行榜的微信小程序页面模板源码下载.zip
11-24
步数排行榜的微信小程序页面模板源码下载.zip
如何使用Vue开发微信小程序游戏的排行榜功能？
alankuo的专栏
10-23 1011
通过以上步骤，你可以在使用 Vue 开发的微信小程序游戏中实现排行榜功能。根据实际需求，你还可以进一步优化和扩展这个功能，比如添加分页显示、筛选条件等。
微信小程序【网易云音乐实战】（第三篇 自定义组件、排行榜的制作、内网穿透、tabBar、个人中心）
程序员战胜
01-22 5328
这里写目录标题一、自定义组件1. 制作自定义组件2. 使用自定义组件3. 组件动态数据二、排行榜的制作1. 静态搭建2. 获取排行榜动态数据三、内网穿透（真机体验）四、tabBar（底部栏） 的使用五、个人中心页面 一、自定义组件 官方文档 自定义组件 1. 制作自定义组件 上面这个部分将在项目中重复使用，所有将其作为一个组件。 首先将index页面文件夹里面的 wxml和wxss里面关于header的代码片段和样式复制到新建的conponent组件相应的文件里。 2. 使用自定义组件 在page
【cocos】微信小程序好友排行榜,代码及打包方式，含demo
烧仙草奶茶的博客
12-06 2030
发布方式：完成点构建 子域设置： ![在这里插入图片描述](https://img-blog.csdnimg.cn/20191206125003765.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0s4NjMzODIzNg==,si...
排行榜的设计与实现
weixin_44730166的博客
09-24 2170
1、展示的数据的设计: 首先展示的数据是多条，所以可以使用列表传递。 一般有多个排行规则，也就有多个排行榜，可以使用一个type字段用于区分（可以使用策略模式，策略设计模式的简单使用） 统计排序规则下的数据量作为排序依据 2、流程部署的实现 前端发送一个请求，携带type参数，用于区分 请求的排行类型 定义一个接口用于接收请求 使用mybatis-plus进行查询排序 将查询出来的数据进行封装：① 实体类对象，② vo对象，③ map进行封装 将数据传到前端显示 但是使用order by进
微信小程序排名规则大揭秘
weixiaocheng123的博客
12-18 2444
小程序作为今年移动互联网行业的新星，其动向被时刻关注着，而且这段时间小程序的入口、功能不断增加，上线的小程序数量也就增多，在搜索时呈现出来的小程序的排名也就至关重要，那小程序到底有什么样的排名规则呢？ 1、上线时间 小程序上线时间越早，排名也就越靠前； 2、关键词描述 小程序描述中出现能够匹配的关键词次数越多，排名越靠前； 3、关键词次数 这里的关键词是
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

布兹学长

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值