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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM