Spring Boot 利用thymeleaf 实现layui 下的轮播

最新推荐文章于 2022-09-09 09:52:09 发布

众纳

最新推荐文章于 2022-09-09 09:52:09 发布

阅读量711

点赞数 1

本文链接：https://blog.csdn.net/weixin_44690195/article/details/118419685

版权

Java Web 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

后端代码

@GetMapping("/sysTest")
    @ApiOperation(value="套餐列表页")
    public String sysTest(Model model) {
        List<String> list =new ArrayList<>();
        list.add("/uploadFile/1612429846397安防.png");
        list.add("/uploadFile/16225488092521.jpeg");
        list.add("/uploadFile/16225490064281.jpeg");
        model.addAttribute("list",list);
        return "page/test";
    }

前端

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>添加部门</title>
    <link rel="stylesheet"   th:href="@{lib/layui-v2.5.5/css/layui.css}"   media="all">
    <link rel="stylesheet"  th:href="@{css/public.css}"   media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>

<body>
<div class="layui-form layuimini-form">
    <div class="layui-carousel" id="test1">
        <div carousel-item>
            <div th:each="room:${list}"><img th:src="${room}"/></div>
        </div>
    </div>
</div>
<script th:src="@{Content/Layui-KnifeZ/layui.js}"  charset="utf-8"></script>
<script>
    layui.use(['form','carousel'], function () {
        var form = layui.form,
            layer = layui.layer,
            carousel = layui.carousel,
            $ = layui.$;

        carousel.render({
            elem: '#test1'
            ,width: '100%' //设置容器宽度
            ,arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
        //监听提交
        form.on('submit(saveBtn)', function (data) {
            var datas =data.field;
             console.log(datas);
            //向后台发送数据并进行添加操作
            $.ajax({
                url:"combo/add",
                type:"POST",
                contentType:"application/json",
                data:JSON.stringify(datas),
                success:function(result){
                    console.log(result)
                    if(result.code==200){
                        layer.msg("添加成功",{
                            icon:6,
                            time:500
                        },function(){
                                parent.window.location.reload();//重新页面
                                var iframeIndex = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(iframeIndex);
                        });
                    }else{
                        layer.msg(result.msg);
                    }
                }
            })
            return false;
        });

    });
</script>
</body>
</html>

效果

众纳

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Spring Boot 利用thymeleaf 实现layui 下的轮播

后端代码@GetMapping("/sysTest") @ApiOperation(value="套餐列表页") public String sysTest(Model model) { List<String> list =new ArrayList<>(); list.add("/uploadFile/1612429846397安防.png"); list.add("/uploadFile/1622548809
复制链接

扫一扫