迅睿 CMS 列表循环特定样式使用技巧【2】

发布于:2024-05-18 ⋅ 阅读:(144) ⋅ 点赞:(0)

在迅睿 CMS 中,我们常常需要对模块内容列表进行特定样式的设置,比如每行的第一个元素显示一种样式,其他元素显示另一种样式。下面我们来详细讲解如何实现。

想要实现的【列表循环特定样式】效果,如图:

迅睿 CMS 模块内容列表循环特定样式调用【2】

解决方法

首先,我们来看以下代码:

{module catid=$catid  order=updatetime page=1 return=rs}
{if ($key_rs % 4 == 0)}
        <div class="m6lie maln">
          <a href="{dr_get_file($rs['thumb'])}" class="m6tu">
            <img src="{dr_get_file($rs['thumb'])}" title="{$rs.title}" alt="{$rs.title}">
            <span class="m6fu">
              <i class="iconfont icon-bigger"></i>
            </span>
          </a>
          <p class="m6zi">{$rs.title}</p>
        </div>
{else}
        <div class="m6lie">
          <a href="{dr_get_file($rs['thumb'])}" class="m6tu">
            <img src="{dr_get_file($rs['thumb'])}" title="{$rs.title}" alt="{$rs.title}">
            <span class="m6fu">
              <i class="iconfont icon-bigger"></i>
            </span>
          </a>
          <p class="m6zi">{$rs.title}</p>
        </div>
{/if}
{/module}

这里的关键在于通过 {if ($key_rs % 4 == 0)} 这个条件判断来区分每行的第一个元素和其他元素。

当满足条件时,即当前元素是每行的第一个时,会显示 <div class="m6lie maln"> 及其包含的内容,具有特定的样式;而不满足条件时,即其他元素则显示 <div class="m6lie> 及其包含的内容。

重点说明: {if ($key_rs % 4 == 0)}

  • 在这个判断中,$key是当前循环的索引,从 0 开始。$key % 4 == 0的意思是判断当前索引是否能被 4 整除,即是否是 4 的倍数。

  • $key是 0、4、8、12 等 4 的倍数时,$key % 4的结果为 0,条件为真,执行相应的代码块;否则,条件为假,执行其他代码块。

  • 在这个例子中,当$key是 0、4、8、12 等 4 的倍数时,会显示特殊样式;否则,显示普通样式。这样就实现了每行的第一个元素显示特殊样式的效果。

这样,我们就可以轻松地实现根据位置来为模块内容列表的元素设置不同的样式,达到我们期望的展示效果。


网站公告

今日签到

点亮在社区的每一天
去签到