• Thymeleaf嵌套循环,每次循环显示固定数量


    问题描述:要实现轮播图,每行展示5张图片,点击左右可继续展示5张。

    查找技术:https://blog.csdn.net/u014042066/article/details/76906565

    测试代码:

            <th:block th:each="i:${#numbers.sequence(0,9)}">
                <li th:index="${i}">
                    <th:block th:each="k:${#numbers.sequence(0,4)}">
                        <div th:text="'i='+${i}"></div>
                        <div th:text="'k='+${k}"></div>
                        <div th:text="'jg='+${k+(i*5)}"></div>
                    </th:block>
                </li>
            </th:block>

    实现轮播代码:

     <ul class="flder">
        <!-- liCount为li的数量减1,此循环为循环出li -->
        <th:block th:each="i:${#numbers.sequence(0,liCount)}">
            <!-- 得到index,index为轮播插件需要 -->
            <li th:index="${i}">
                <!-- 此循环为list循环,得到数据 -->
                <th:block th:each="k:${#numbers.sequence(0,4)}">
                    <!-- 判断list大小,防止下标越界 -->
                    <th:block th:if="${#lists.size(activityList) gt k+(i*5)}">
                        <div class="xsq_deal_wrapper">
                            <a class="saleDeal" href="" target="_blank">
                                <div class="dealCon">
                                    <img class="dealImg" th:src="${fileService}+${activityList[k+(i*5)].imgUrl}" th:alt="${activityList[k+(i*5)].activityTitle}">
                                    <div class="zt2Qrcode overlay"></div>
                                </div>
                                <div class="title_new">
                                    <p class="word"><span class="baoyouText" th:text="${activityList[k+(i*5)].createTimeVo}"></span></p>
                                </div>
                                <div class="dealInfo">
                                    <span class="price"><em th:text="${activityList[k+(i*5)].activityTitle}"></em></span>
                                    <span class="shop_preferential">查看详细事迹>></span>
                                </div>
                            </a>
                        </div>
                    </th:block>
                </th:block>
            </li>
        </th:block>
    </ul>
  • 相关阅读:
    高效沟通
    Oracle播放多条 INSERT ALL
    oracle的同义词总结
    Brute force Attack
    爱因斯坦方程与小黑洞
    dom 编程(html和xml)
    dexposed框架Android在线热修复
    从微软小冰看微软运营手段的转型
    剑指offer_面试题_从上往下打印二叉树
    外面的wifi非常精彩,外面的wifi非常不安
  • 原文地址:https://www.cnblogs.com/ljl-blog/p/11158102.html
Copyright © 2020-2023  润新知