前言

簡單首頁大圖輪播，可以使用Wex5組件carousel並參考官方案例仿淘寶完成。

swiper輪播靜態數據也比較簡單(添加基本顯示組件->引入css,js->初始化swiper)。

在給swiper動態追加數據過程中，會出現只顯示第一張圖、不輪播等各種問題，主要原因是在swiper初始化完成時動態追加的數據還沒有加載完成，swiper沒有獲取到顯示數據。解決思路是在數據加載完成後再初始化swiper。

效果展示

步驟

[1]添加顯示組件：

[2]引入swiper

require("css!./css/swiper-3.4.2.min").load();
require("./js/swiper-3.4.2.jquery.min
 
");

[3]動態追加圖片數據到swiper-wrapper，並初始化swiper

//商品主圖
var image_list=productData.val(‘image_list‘).split(‘|‘);
var str=‘‘;
for(var i=0;i<image_list.length;i++){
    str+="<div class=‘swiper-slide zhutu-item‘><img class=‘pic‘ src=‘"+image_list[i]+"‘ style=‘height:320px;‘/></div>";
}    
$(
 
‘.swiper-zhutu .swiper-wrapper‘).append(str);//加載圖片
$(".swiper-zhutu").swiper({//初始化
    loop: true,
    paginationType:‘fraction‘,
    pagination: ‘.swiper-zhutu-pagination‘,
    autoplay:5000,
    autoplayDisableOnInteraction : false,
    observer: true,
    observeParents: true,               
});     

Tip:

observer屬性表示改變swiper樣式或修改swiper子元素時自動初始化swiper(具體可以參看swiper官方手冊)

圖片輪播-swiper動態加載