前言
项目中前端要实现滚屏展示,即一屏展示七个,从六屏。刚开始直接外层一个sequence进行六屏循环,内层直接拿数据对象each,发现不行,只能取7个,很是惆怅。后来google了半天,结合自己的一些实践终于解决。
实现
外层循环自己的屏幕数量,内层遍历展示条数,利用集合下标进行取值,当然记得判断集合大小。
<th:block th:each="i:${#numbers.sequence(0,5)}">
<div class="swiper-slide" style="height:290px;">
<ul>
<th:block th:each="k:${#numbers.sequence(0,6)}">
<th:block th:if="${#lists.size(contents) gt k+(i*7)}">
<li>
<a
th:href="@{${contents[k+(i*7)].url}}"
target="_blank"
th:text="${contents[k+(i*7)].title}"
></a>
</li>
</th:block>
</th:block>
</ul>
</div>
</th:block>
效果
我有12条数据,每屏7条
最后
作者:ricky
交流群: 244930845