🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# 排行榜 * * * * * 排行榜组件用于按照一定规则对参加活动的用户进行排序并显示结果。 如下图,我们在第1页舞台上添加相关素材,例如微信头像、微信昵称、输入框和文本框,分别命名为“头像”“昵称”“文本输入1”“分数”。其中“分数”与“文本输入1”进行了关联绑定。 ![](https://box.kancloud.cn/5b48e3d81a3e985a80fea8d3a39c1720_900x445.png) 我们在第2页设置了一个排行榜的排序,如下图,横排分别为名次、微信头像、微信昵称、得分。分别命名为“名次#”“头像#”“名字#”“得分#” ![](https://box.kancloud.cn/5d41094ea1d18fa2b1039c2c19e0793a_900x459.png) >[info]###### 注意:排行榜的命名规则,名次、头像、名字、得分的命名规则只要以“XXX1、XXX2、XXX3……”的形式来命名。 回到第1页,在舞台上添加一个排行榜工具,设置“上榜数目”为“10”,“上榜分数”为“20”,“分数规则”为“降序”。默认名称为“排行榜1”。 ![](https://box.kancloud.cn/52d33854227a4baaf8cab4aea43cc569_900x500.png) 为“游戏结束,提交排行榜”按钮设置“提交排行榜”行为 数据服务→提交排行榜→触发条件:点击→设置参数 排行榜名称:“排行榜1” 分数:“分数” 名称:“昵称” 头像:“头像” 操作成功后:跳转到第2页 ![](https://box.kancloud.cn/e8652d1ce47fd0c97cbc972575143796_900x505.png) ![](https://box.kancloud.cn/5ff05445f8f2a47da9eb51ecc46ab814_900x482.png) 来到第2页,我们在舞台之外添加一个矩形,为矩形添加“获取排行榜”行为 数据服务→获取排行榜→触发条件:出现→设置参数 排行榜名称:“排行榜1” 名次元素名称:“名次” 名字元素名称:“名字#” 分数元素名称:“得分#” 头像元素名称:“头像#” ![](https://box.kancloud.cn/c21a8fce91c79abc2855c416de96ccb2_900x505.png) ![](https://box.kancloud.cn/5497a7c9bc5914a7f7cb17421647eb09_900x362.png) 双击排行榜组件,在弹出的“排行榜”对话框中点击“管理实时数据”,可观察或修改名次信息。 ![](https://box.kancloud.cn/5e8797893723ffd04642939efcd84278_900x349.png) **设置“是否上榜”提示** 在第1页添加一个文本框命名为“是否上榜” 修改“游戏结束,提交排行榜”按钮的“提交排行榜”行为参数 显示是否上榜:“是否上榜” 操作成功后:“请选择行为” 我们观察到当上榜时,“是否上榜”文本框显示“1”,当没有达到上榜标准,文本框显示“0” ![](https://box.kancloud.cn/c908cbc23b0c5a4c006033bf6eff8900_900x502.png) 添加“查看”按钮,为其添加两个“跳转到页”的行为: ![](https://box.kancloud.cn/16f563dc073843c6b1fa92a9c026ca75_900x505.png) 分别为两个行为设置 “当‘是否上榜’文本框等于‘1’时,点击跳转第2页” “当‘是否上榜’文本框等于‘0’时,点击跳转第3页” ![](https://box.kancloud.cn/e53f43330688a4d3246fdd46d8f81d89_900x499.png) ![](https://box.kancloud.cn/7b62d6743a0678b20009ed49114c72f9_900x495.png) 如下图,添加第2、3页,分别添加“恭喜上榜”“很遗憾”的提示。 同时为两页再添加一个“查看排行榜”按钮,为按钮添加“点击跳转第4页”行为。 ![](https://box.kancloud.cn/8b12ee3659d2c85929547bd95ce023ff_900x504.png) 如此,显示是否上榜的相关行为已经设置。 观看本节视频教程: http://cdn1.mugeda.com/course/3/3.5/3.5.12.mp4