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); }

从而实现排行榜的效果 可以通过调整配置 排行榜展示数量和热度颜色，来微调样式 若有其他更好的方式，请联系作者，相互学习相互进步