技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> 信息和交互 --> 关于排行榜代码优化

关于排行榜代码优化

浏览:1379次  出处信息

目前比较常见的排行榜设计都习惯将靠前的TOP3与其他七项有所区别,主要是序号的背景或者文字的颜色有所区别,如图

这种排行榜实现按以前的思维,习惯在for循环输出对大于0小于3的输出一种格式,其他几项采用另外一种格式,代码如下:

    #set($list=$tag.getList(“topicid=00853R2J;listnum=10;titlelength=20;pointstart=60;pointend=80;”))

    #if ($list)

    #foreach ($one in $list)

    #set ($til=${tools.replaceAll([标题],”\””,”"”)})

    #if($velocityCount<4)

  • $velocityCount$til
  • #end

    #if($velocityCount>4 && $velocityCount<10)

  • $velocityCount$til
  • #end

    #end#end

其实单从后台语言输出来看确实觉得优化空间比较小,所以换一个从css的角度进行优化。

我们可以将序号的css背景先整合在一张sprite,用于ul 的背景图,这样根据ul里li的数量增加ul的背景也能相应的显示出来,而且后台输出代码也能简化逻辑,不需要再做逻辑判断只要输出li就可以。代码如下:

    #set($list=$tag.getList(“topicid=00853R2J;listnum=10;titlelength=20;pointstart=60;pointend=80;”))

    #if ($list)

    #foreach ($one in $list)

    #set ($til=${tools.replaceAll([标题],”\””,”"”)})

  • $til
  • #end#end

sprite如图所示:

注释:后台使用的是velocity java的模板引擎。

建议继续学习:

  1. 排行榜奖金的发放方法    (阅读:639)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1