dede循环如何实现不同样式切换？

核心思路

无论使用哪种方法,核心思路都是一样的：

1. 获取一个循环计数器：在 Dede 的循环标签中，可以通过 [field:global.autoindex/] 来获取当前是第几次循环（从1开始）。
2. 根据计数器的值判断样式：使用 PHP 的条件判断语句（如 if...else 或三元运算符 ）来对计数器进行取模（）或其他判断。
3. 应用不同的 CSS 类：根据判断结果，为当前循环的元素输出不同的 CSS 类名。

使用 if...else 判断（最基础、最清晰）

这种方法逻辑最清晰，适合样式差异较大、判断条件不复杂的情况。

场景：假设我们想让列表中的奇数行和偶数行显示不同的背景色。

步骤：

1. 准备 CSS：在你的 CSS 文件中定义两个不同的样式类。

   /* 在你的 style.css 文件中 */
   .list-item-odd {
       background-color: #f9f9f9; /* 奇数行背景色 */
       padding: 10px;
       margin-bottom: 5px;
       border: 1px solid #eee;
   }
   .list-item-even {
       background-color: #e9f7fe; /* 偶数行背景色 */
       padding: 10px;
       margin-bottom: 5px;
       border: 1px solid #d1e9ff;
   }

2. 编写模板代码：在模板文件中，使用 if 语句来判断 [field:global.autoindex/] 的奇偶性。

   {dede:arclist typeid='1' titlelen='30' row='10'}
       <li 
           [field:global name=autoindex runphp="yes"]
               if(@me % 2 == 0) {
                   @me = 'class="list-item-even"';
               } else {
                   @me = 'class="list-item-odd"';
               }
           [/field:global]
       >
           <a href="[field:arcurl/]">[field:title/]</a>
       </li>
   {/dede:arclist}

代码解析：

• [field:global name=autoindex runphp="yes"]：获取当前循环的索引号（从1开始），并启用 PHP 运行。
• if(@me % 2 == 0)：@me 在这里代表 autoindex 的值。 是取模运算符。autoindex 除以2的余数为0（即偶数）,则条件成立。
• @me = 'class="list-item-even"'：如果条件成立，就将 @me 变量的值设置为 class="list-item-even"。
• else { ... }：如果条件不成立（即奇数），则设置为 class="list-item-odd"。
• <li> 标签就会根据奇偶性带上不同的 class。

使用三元运算符（更简洁）

如果只是简单的二选一,三元运算符可以让代码更简洁。

场景：与方法一相同,奇偶行不同样式。

模板代码：

{dede:arclist typeid='1' titlelen='30' row='10'}
    <li 
        [field:global name=autoindex runphp="yes"]
            @me = (@me % 2 == 0) ? 'class="list-item-even"' : 'class="list-item-odd"';
        [/field:global]
    >
        <a href="[field:arcurl/]">[field:title/]</a>
    </li>
{/dede:arclist}

代码解析：

• (条件) ? '值A' : '值B'：这是三元运算符的语法。
• (@me % 2 == 0) 为真，则整个表达式的结果是 'class="list-item-even"'。
• 如果为假，则结果是 'class="list-item-odd"'。
• 这种写法与方法一功能完全相同,但代码更短。

使用取模运算实现多种循环样式（最常用）

这是最灵活、最常用的方法，可以实现3种、4种甚至更多样式的循环。

场景：我们想让列表中的行依次显示样式A、样式B、样式C,然后循环往复。

步骤：

1. 准备 CSS：定义三种样式。

   .style-a { background-color: #ffebee; }
   .style-b { background-color: #e8f5e9; }
   .style-c { background-color: #e3f2fd; }

2. 编写模板代码：使用 (autoindex - 1) % 3 来获取0、1、2的循环结果。

   {dede:arclist typeid='1' titlelen='30' row='10'}
       <li 
           [field:global name=autoindex runphp="yes"]
               $index = (@me - 1) % 3; // 将 1,2,3,4,5,6,7,8,9,10 转换为 0,1,2,0,1,2,0,1,2,0
               if($index == 0) {
                   @me = 'class="style-a"';
               } elseif($index == 1) {
                   @me = 'class="style-b"';
               } else {
                   @me = 'class="style-c"';
               }
           [/field:global]
       >
           <a href="[field:arcurl/]">[field:title/]</a>
       </li>
   {/dede:arclist}

代码解析：

• $index = (@me - 1) % 3;：这是关键！
  • autoindex 从1开始，如果直接 1 % 3，结果是1，2 % 3是2，3 % 3是0，虽然也能用,但逻辑上从0开始更符合数组或样式的索引。
  • 通过 (@me - 1)，我们将索引调整为从0开始：1->0, 2->1, 3->2, 4->0...
  • 这样，$index 的值就会在 0, 1, 2 之间循环。
• 后续的 if...elseif...else 判断就非常清晰了，根据 $index 的值分配对应的样式。

使用 switch 语句（适合样式较多）

当需要循环的样式超过3、4种时，switch 语句会比一长串的 if...elseif 更易读和维护。

场景：循环5种不同的样式。

模板代码：

{dede:arclist typeid='1' titlelen='30' row='10'}
    <li 
        [field:global name=autoindex runphp="yes"]
            $index = (@me - 1) % 5; // 循环5种样式
            switch($index) {
                case 0:
                    @me = 'class="style-one"';
                    break;
                case 1:
                    @me = 'class="style-two"';
                    break;
                case 2:
                    @me = 'class="style-three"';
                    break;
                case 3:
                    @me = 'class="style-four"';
                    break;
                default: // case 4
                    @me = 'class="style-five"';
                    break;
            }
        [/field:global]
    >
        <a href="[field:arcurl/]">[field:title/]</a>
    </li>
{/dede:arclist}

总结与建议

最佳实践：

• 对于奇偶行切换，推荐使用 方法二（三元运算符）,因为它最简洁。
• 对于需要3种或更多样式的循环，强烈推荐 方法三（取模+if），这是 DedeCMS 模板设计的经典模式,非常实用和强大。
• 如果样式非常多（比如超过5种），可以考虑使用 方法四（switch） 来保持代码整洁。

希望这些方法能帮助你灵活地实现各种循环样式的需求！