layUI实现排行榜效果

排行榜是现在门户网站，各种网站经常会出现的一种类型的菜单，而可以通过layui简单配置实现排行榜效果
1.首先定义一个范围

<div><fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"><legend>浏览量总排行榜</legend></fieldset><div style="font-family:Arial;font-size:16px" id="ViewPhbInfo"><!--排行榜载体--></div>
</div>

2.使用方法初始化加载时动态加载排行榜内容

在这里插入代码片

模拟排行榜用layui实现排行榜的效果

 var PhCount = 10;//排行榜数量//每个排行榜单的颜色var PhRdColor = ["red", "orange", "orange", "green", "green", "cyan", "blue", "black", "black", "blue"];var FxDATA ={};FxDATA.View=[];//可以从后台请求数据 这个地方进行模拟数据FxDATA.View.push({ViewCount:1100,MC:"测试数据1100点击"})；FxDATA.View.push({ViewCount:800,MC:"测试数据800点击"})；FxDATA.View.push({ViewCount:700,MC:"测试数据700点击"})；FxDATA.View.push({ViewCount:660,MC:"测试数据660点击"})；FxDATA.View.push({ViewCount:600,MC:"测试数据600点击"})；FxDATA.View.push({ViewCount:500,MC:"测试数据500点击"})；FxDATA.View.push({ViewCount:400,MC:"测试数据400点击"})；FxDATA.View.push({ViewCount:300,MC:"测试数据300点击"})；FxDATA.View.push({ViewCount:100,MC:"测试数据100点击"})；if (FxDATA != null && FxDATA.View != undefined) {//浏览量总排行榜 str = "<blockquote class='layui-elem-quote layui-quote-nm'>";//排行榜的载体for (var i = 0; i < FxDATA.View.length; i++) {if (i != 0) {str = str + "<br>";}//分别表示排行榜的热度颜色 排行榜的点击数量 当前热度排行的名称//<span class='layui-badge-dot layui-bg-red'></span> <span class='layui-badge-rim'>200</span> <a>这个样式就可以形成一个排行榜效果</a>str = str + "<span class='layui-badge-dot layui-bg-" + PhRdColor[i] + "'></span> <span class='layui-badge-rim'>" + FxDATA.View[i].ViewCount + "</span> <a>" + FxDATA.View[i].MC + "</a>";}str = str + "</blockquote> ";$("#ViewPhbInfo").append(str);}

从而实现排行榜的效果可以通过调整配置排行榜展示数量和热度颜色，来微调样式

若有其他更好的方式，请联系作者，相互学习相互进步

layUI实现排行榜效果相关推荐

list redis 怎样做排行_redis实现排行榜效果
现在的互联网应用基本都有排行榜这个功能,现在就用java + redis来实现一下吧. 先看一下效果: 引入依赖 redis.clients jedis 2.7.3 开发思路 1.页面上点击一次购买按 ...
小红旗图标在excel如何输入_通过Excel条件格式为指定数据送上“小红旗”，排行榜效果立现！...
上一篇文章<使用Excel数据条,可瞬间提高你的报表颜值,还不赶紧试试?>仅仅只是介绍了单元格图形格式中的"数据条".有了那个基础之后,再来学习"色阶&quo ...
小程序左右标签滑块排行榜
小程序左右标签滑块排行榜效果: <view class="menu"><view class="{{currentTab==0?'select':'d ...
layui表单的ajax联动,layui的select联动实现代码
要实现联动效果注意两点: 第一要可以监听到select的change事件: 第二异步加载的内容,需要重新渲染后才可以正常使用. html结构: 所在省份: 请选择省份 ${provincelist. ...
基于layui的select区域联动
2019独角兽企业重金招聘Python工程师标准>>> 基于layui的select区域联动要实现联动效果注意两点: 第一要可以监听到select的change事件: 第二异步加载 ...
结合Layui框架，实现SpringMVC+Spring+Mybatis,SSM整合案例CRUD（超详细代码，外加说明）
首先: 你需要去Layui官网下载UI框架.你可能会问,为什么用Layui实现页面效果?简单来说就是:简单.好用.上手快,作为JAVA后端开发人员,Layui无疑是非常友好的,拿来即用. 页面效果图: ...
基于心理学视角论述游戏排行榜设计
在投币式街机电子游戏的全盛时期,没有什么比看到我们的名字出现在游戏高分榜单上更令人雀跃.看到名字掉出榜尾位置,自己被不过是积分多些的用户角色取代,是个郁闷过程.友善对手促使我们持续在<打气人&g ...
如何利用UGUI在Unity中实现一个本地排行榜
write by 书封影前置知识:Unity的基本操作,C#基础,List泛型集合基本操作,GameManager,string的基本使用方法.注意,本文默认你已经掌握上述知识,并在后文中不会对上述 ...
Layui中jQuery二级联动
Layui与jQuery的碰撞情况描述失效原因最终实现流程标签对部分 Layui实现实现效果其他注释情况描述 JavaWeb项目使用Layui框架结构进行开发: 在实际开发中使用到页面s ...

layUI实现排行榜效果

layUI实现排行榜效果相关推荐

最新文章

热门文章