SAO UI Plan -- Ranklist
SAO UI Plan -- Ranklist
点击查看更新记录
更新记录
2021-02-02:内测版v0.27
- 实现SAO UI 风格的排行榜
- 血条自动计算。
- 血条颜色根据血量进行调整。
- 支持自定义用户名和血量，等级等属性。
- 可以用作打赏榜单或者友链排行。
- 读者可以通过更改ID来实现排行榜复用，实现多个榜单。
- 建议配合SAO-Utils-Web 2.0一起使用。
2021-02-03:内测版v0.39
- 更改配置项，配合等级设定，使用基本血量和升级梯度计算最大血量
- 新增方案，初版方案，血量百分比自定义，悬停提示语自定义
- 新增方案，打赏方案，填写等级和打赏金额，自动计算血量。悬停提示语默认使用感谢
**打赏￥**字样。 - 更改打赏二维码分辨率。修复扫一扫无效的bug。
点击查看参考教程
参考方向 | 教程原贴 |
|---|---|
UI风格参考，图标、音效资源采集 | SAO Utils |
图标采集 | fontawesome |
原生js实现拖拽效果 | js拖拽：简单五步实现元素拖拽功能 |
资源下载
由于本教程涉及的所有修改对缩进格式等有严格要求，担心自己控制不好的可以直接下载静态资源。参照教程进行修改。
预览效果
写在最前
店长的碎碎念
2021年2月2日 星期二 晴转多云
今天是我的生日哒！
把SAO Utils Web也归入了 SAO UI PLAN ，复现SAO 风格界面算是告一段落啦。
这个榜单一开始是准备拿来当做打赏榜单的。可是临到头却发现没人打赏。（疯狂暗示）所以就只能拿来充当友链排行啦。
教程正文
- 初版方案:SAO_ranklist_base
- 打赏榜方案：SAO_ranklist_reward
初版方案需要自定义各种内容，例如等级和血量百分比，悬停提示语。相对的你可以把它当成任何榜单，例如友链排行、打赏榜单、龙王榜单。
新建:
新建,
修改,引入排行榜单网页元素，注意取消了缓存配置，转为完全默认，需要将改为:
新建,控制显隐逻辑：
修改,添加CDN配置项和菜单选项：
调用榜单：榜单使用方法调用，可以加装在任何元素上，使用触发点击调用。此处提供加装到侧栏按钮的方案。修改,
虽然初版榜单也可以通过信息调整充当打赏榜单的功能，但是相对的信息表达上不是特别明晰。打赏榜方案做了一些细节上的优化，必要信息为打赏金额和打赏人名称以及等级。通过公式计算最大血量和血量百分比。最终效果是等级乘以血量百分比为打赏金额。悬停提示默认为感谢***打赏的￥**。相对初版方案,只需要修改SAO-ranklist.pug和配置文件中的配置项即可。
新建:
新建,
修改,引入排行榜单网页元素，注意取消了缓存配置，转为完全默认，需要将改为:
新建,控制显隐逻辑：
修改,添加CDN配置项和菜单选项：
调用榜单：榜单使用方法调用，可以加装在任何元素上，使用触发点击调用。此处提供加装到侧栏按钮的方案。修改,
TO DO
实现SAO UI风格的血量排行榜
血量自动计算
血条颜色自动匹配
显隐功能提取，支持加装到任意按钮
曲面3D化