Swiper thymeleaf

Posted 2020-09-20 小安妮的熊

html页面：

<div class="swiper-container swiper_tjzt">
<div class="swiper-wrapper">
	<div class="swiper-slide"  th:each="i : ${#numbers.sequence( 1,((#lists.size(tagListInfos)%8==0)?(#lists.size(tagListInfos)/8):(#lists.size(tagListInfos)/8+1)))}">
		<div class="weui-grids">
			<th:block th:each="tagInfos,iterStat:${tagListInfos}" >
				<th:block th:if="${iterStat.count<=8*i and iterStat.count>=(8*(i-1)+1)}">
					<a class="weui-grid" th:onclick="\'javascript:listBybq(\\\'\'+${tagInfos.id}+\'\\\',\\\'\'+1+\'\\\');\'">
						<div class="weui-grid__icon">
							<img th:src="@{${tagInfos.bqurl}}"  alt="" />
						</div>
						<p class="weui-grid__label" th:text="${tagInfos.bqname}"></p>
					</a>
				</th:block>
			</th:block>
		</div>
	</div>
</div>
<div class="swiper-pagination pagination_tjzt"></div>
</div>

　　js部分：

    var mySwiper = new Swiper(\'.swiper_tjzt\', {
        pagination: \'.pagination_tjzt\',
//         paginationClickable: true,
        spaceBetween: 30,
    });

　　后端返回json数据实例：

{ "code": "0","msg": "请求成功","data": [{"id":"","bqname": "亲子","bqurl": "图片路径"
},
{"id":"","bqname": "自驾","bqurl": "图片路径"},{"id":"","bqname": "蜜月","bqurl": "图片路径"},{"id":"","bqname": "古镇","bqurl": "图片路径"},{"id":"","bqname": "爸妈游","bqurl": "图片路径"},{"id":"","bqname": "山水游","bqurl": "图片路径"},{"id":"","bqname": "健康养生","bqurl": "图片路径"}]}

　　java后台封装：

 

model.addAttribute("tagListInfos",service.获取接口方法返回的json数据());

 

最终实现效果为：

　　

 

thymeleaf 学习文档

 http://www.open-open.com/lib/view/open1451625468230.html