swipe 动态改变内容时,需要用 update 一下。
swiper.update(true);
实例:
HTML Code
页面用的FreeMarker渲染
<div class="swiper-container swiper-container-horizontal"> <ul class="swiper-wrapper"> <#if goods.productImages?has_content> <#list goods.productImages as productImage> <li pid="${productImage.productId}" class="swiper-slide"> <img src="${productImage.source}" > </li> </#list> </#if> </ul> <!-- Add Pagination --> <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets"> <span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span> <span class="swiper-pagination-bullet"></span> <span class="swiper-pagination-bullet"></span> <span class="swiper-pagination-bullet"></span> </div></div><script> var swiper = new Swiper(‘.mSwiper .swiper-container‘, { pagination: ‘.mSwiper .swiper-pagination‘, paginationClickable: true });</script>
JavaScript Code
// 商品图片联动 var changeProductImage = function(productId){ // 重新加载图片 var $showProductImage = $("ul.swiper-wrapper"); $showProductImage.empty(); for (var i = 0; i < productImages.length; i++) { $showProductImage.append("<li pid=\""+productImages[i].productId+"\" class=\"swiper-slide\" style=\"width: 640px;\">"+ "<img src=\""+productImages[i].source+"\" alt=\"\"></li>"); } // 更新图片轮播 swiper.update(true); };
注:主要用于商品图片展示,当选择不同颜色的商品,商品图片要替换。
时间: 2024-10-13 07:35:41