标签：text 实例 model ble tag thymeleaf 健康 lis script
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}}" />
</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数据());
最终实现效果为：
http://www.open-open.com/lib/view/open1451625468230.html
标签：text 实例 model ble tag thymeleaf 健康 lis script
原文地址：http://www.cnblogs.com/1246447850qqcom/p/6928078.html
