SpringBoot+Thymeleaf整合，th:each遍历图片横向或者纵向超过屏幕解决问题，让遍历每次展示固定图片或者文本

最新推荐文章于 2022-08-17 09:30:32 发布

TinkerBell学习笔记

最新推荐文章于 2022-08-17 09:30:32 发布

阅读量1k

点赞数

文章标签： spring boot html

本文链接：https://blog.csdn.net/m0_59069586/article/details/124396165

版权

关键代码：

 <td class="col-xs-6 col-md-2" th:each="com:${coms}" th:if="${comStat.index lt 5} ">

 <td class="col-xs-6 col-md-2" th:each="com:${coms}" th:if="${ comStat.index ge 5 &&  comStat.index le 10} ">

遍历两次，第一次0-5，第二次5-10；如果不这么做遍历一次性10个只能一列或者一行展示

效果

关于th:if判断的一些语法

less than ：小于< lt

less equal :小于等于<= le

great than : 大于> gt

great equal :大于等于>= ge

还可以做 and or操作具体见上面我的代码！

整体代码：

前端部分：

<tr>
                    <td class="col-xs-6 col-md-2" th:each="com:${coms}" th:if="${comStat.index lt 5} ">
                        <a th:href="@{/membershow(name=${com.getName()},brand=${com.getBrand()},type=${com.getType()},adapt=${com.getAdapt()},price=${com.getPrice()})}"  class="thumbnail">
                        <img class="layui-nav-item" th:src="@{|/computerImg/${com.name}1.jpg|}" alt="" style="height:230px; width: 280px" >
                                                                                                    <!--style="height: 200px; width: 100%; display: block;"-->
                            <div class="caption" style="text-align: left;">
                            </a>
                            <div>
                                <span th:text="|${com.brand}-${com.name}|"></span>
                            </div>
                            <div>
                                <span style="color: #eb7350;">&yen;
                                    <span th:text="${com.price}"></span>
                                </span>
                            </div>
                            <a th:href="'javascript:focus('+ ${com.name} +')'" class="btn btn-primary"
                               style="font-size: 10px;">加入购物车</a>
                            <!--<td>                                                                                                                                                                                                                                                  &lt;!&ndash;900,500&ndash;&gt;
                            <u  th:url="|@{/Order}|" th:onclick="member_show('电脑详细查看',this.getAttribute('url'),'10001','850','350')">
                            </u>
                            </td>-->
                            <a th:url="|@{/Order(id=${com.id},name=${com.name},price=${com.price},brand=${com.brand})}|"
                               class="btn btn-primary" th:onclick="member_show('请填写你的订单',this.getAttribute('url'),'10001','680','460')"
                                    style="font-size: 10px;">购买</a>
                    </td>
                </tr>

<tr>
                    <td class="col-xs-6 col-md-2" th:each="com:${coms}" th:if="${ comStat.index ge 5 &&  comStat.index le 10} ">
                        <a th:href="@{/membershow(name=${com.getName()},brand=${com.getBrand()},type=${com.getType()},adapt=${com.getAdapt()},price=${com.getPrice()})}"  class="thumbnail">
                        <img class="layui-nav-item" th:src="@{|/computerImg/${com.name}1.jpg|}" alt="" style="height:230px; width: 280px" >
                                                                                                    <!--style="height: 200px; width: 100%; display: block;"-->
                            <div class="caption" style="text-align: left;">
                            </a>
                            <div>
                                <span th:text="|${com.brand}-${com.name}|"></span>
                            </div>
                            <div>
                                <span style="color: #eb7350;">&yen;
                                    <span th:text="${com.price}"></span>
                                </span>
                            </div>
                            <a th:href="'javascript:focus('+ ${com.name} +')'" class="btn btn-primary"
                               style="font-size: 10px;">加入购物车</a>
                        <a th:url="|@{/Order(id=${com.id},name=${com.name},price=${com.price},brand=${com.brand})}|"
                           class="btn btn-primary" th:onclick="member_show('请填写你的订单',this.getAttribute('url'),'10001','500','350')"
                           style="font-size: 10px;">购买</a>
                    </td>
                </tr>

后端：

 @RequestMapping("/ComputerIndex")
    public String ComIndex(Model model){
        Collection<Computer> computers = computerDao.getAll();
        model.addAttribute("coms",computers);
        return "/ComputerIndex.html";
    }