------在我使用bootstrap时用到了轮播图,需要将后台数据传送到前端,之前使用的SSM框架,用jsp作为view层,c:foreach+c:choose可以完成此功能,现在需要用到thymeleaf作为view。
- thymeleaf的th:each可以起到循环遍历数据作用,然而当需要判断哪条数据作为初始active就需要进行判断。
- thymeleaf的th:if搭配th:each="xxx:${yyy}"的xxxStat.index可以进行数据的迭代判断,也可以使用th:each="xxx:${yyy}"的xxxStat.first进行判断。
Block标签解决循环出多余标签显示问题:
使用th:each标签,在循环的过程中会造成生成多个多余标签,导致bootstrap的效果未能正确显示,使用这个标签可以既迭代了数据,又没有生成多余的标签。如图:
代码:
<div class="carousel-inner">
<th:block th:each="banner:${banners}">
<div class="carousel-item active" th:if="${bannerStat.index==0}">
<a>
<img th:src="${banner.imageUrl}" class="d-block w-100" style="width: 100%;height: 500px;" alt="...">
</a>
</div>
<div class="carousel-item" th:if="${bannerStat.index!=0}">
<a>
<img th:src="${banner.imageUrl}" class="d-block w-100" style="width: 100%;height: 500px;" alt="...">
</a>
</div>
</th:block>
</div>