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

文章

一、效果演示
二、源代码
- ranking.wxml
- ranking.wxss
- ranking.js
三、项目demo地址
四、参考链接

一、效果演示

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

二、源代码

ranking.wxml

<view class="rank-page"><!-- 顶部栏 --><view class="page-head"><view class="page-title">YOUTH LEARNING</view>    </view><!-- 顶部滑块 --><view class="rank-types"><viewclass="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.jsPage({onLoad: function() {// 加载当前排名分类页面的数据内容this.loadRanking()},data: {// 存储每条排名信息rankItems: [],// 控制模态框的显示modalHidden: true,// 顶部分类排名滑块名称rankTypes: ['学习率排名', '学院积分排名', '个人积分排名'],// 页面初始化加载的分类排名页面currentRankType: '学习率排名'},// 改变分类排名页面changeRankType: function(e) {wx.showToast({title: '加载中',icon: 'loading'})  // 获取当前点击的排名分类滑块名称 var rankType = e.currentTarget.dataset.rankTypeconsole.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

微信小程序之排行榜功能实现相关推荐

黯然微信小程序杂记（三）：微信小程序实现倒计时功能附讲解教学附源码
黯然微信小程序杂记(三):微信小程序实现倒计时功能附超详细注释附源码一.功能描述二.界面展示三.test.wxml代码四.test.js代码(注释很详细很易懂) CSDN私信我,有关微信 ...
微信小程序实战购物车功能
代码地址如下: http://www.demodashi.com/demo/12400.html 一.准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.com ...
微信小程序实现语音识别功能
原标题:微信小程序实现语音识别功能使用小程序实现语音识别功能,由于语音识别可以直接使用各厂家的API接口,并且小程序为腾讯所有,因此考虑到可能的低延时,采用了腾讯提供的免费API接口,准确讲是腾讯语 ...
微信小程序语音识别java_微信小程序实现语音识别功能
原标题:微信小程序实现语音识别功能使用小程序实现语音识别功能,由于语音识别可以直接使用各厂家的API接口,并且小程序为腾讯所有,因此考虑到可能的低延时,采用了腾讯提供的免费API接口,准确讲是腾讯语 ...
微信小程序拼团功能页面展示
微信小程序拼团功能页面展示一.拼团功能拼团就是让消费者在优惠价格的吸引下,自发邀请好友组团,以优惠的价格购买商品的促销活动二.拼团功能的作用 1.与纯粹的购物相比,这种营销方式迎合了大多数用户的 ...
微信小程序原生开发功能合集一：微信小程序开发介绍
一.专栏介绍本专栏主要内容为微信小程序常用功能开发过程的介绍说明,包括开发微信小程序常用组件的封装.常用功能的开发等,提供源代码.开发过程讲解视频.完整的课程等. 组件封装: 下拉选择组件. ...
IVX低代码平台开发——微信小程序实现抽奖功能
写在前面通过利用可视化编程实现微信小程序的抽奖功能,带大家初步了解 iVX 的强大之处. 文章目录写在前面 iVX开发抽奖功能实现 iVX开发基本介绍 iVX是一个 "零代码&quo ...
微信小程序-001-抽签功能-006-我的抽签-主界面
微信小程序-001-抽签功能-006-我的抽签-主界面目录一.wxml 二.js pages.chouqian.setqian.setqian 一.wxml <view wx:for=&qu ...
微信小程序与卡券功能小结
微信小程序与卡券功能小结前段时间公司有一个微信小程序的项目,其中有与卡券打通的功能,但是微信的官方文档实在是一言难尽...找了很多资料才解决这个问题,其中涉及到卡券的领取,卡券的核销等,在这里做一个 ...

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

文章

一、效果演示

二、源代码

ranking.wxml

ranking.wxss

ranking.js

三、项目demo地址

微信小程序之排行榜功能实现相关推荐

最新文章

热门文章