swiper（左右滑动）动态加载数据

实现效果如图：(自动滚动切换)

代码：

function exampleBoutiqueList() {
	params = {
		page: 1,
		pageSize: 3
	}
	flowload(params, app.serverUrl + "/boutique/get/exampleBoutiqueList", "GET", '.swiper-wrapper') //懒加载
}

var swiperlis = []
function flowload(data, url, type, id) {
	layui.use('flow', function() {
		var flow = layui.flow;
		flow.load({
			elem: id, //流加载容器
			done: function(page, next) {
				//模拟数据插入
				var ss = Get(data, url, type)
				setTimeout(function() {
					if(ss.status==200){
						layui.each(ss.data.rows, function(index, item) {
							swiperlis.push(
								`<div class="swiper-slide" >
									<div class="swipe1-before"><div class="before-img">定制前</div><img src="${app.serverUrl+item.frontImage}" /></div>
									<div class="swipe1-after"><div class="after-img">定制后</div><div class="after-title">${item.title}</div><img src="${app.serverUrl+item.afterImage}" /></div>
								</div>`
							);
						})
						params.page++;
						if(params.page<=ss.data.total){
							// 判断是否是最底
							flowload(params, app.serverUrl + "/boutique/get/exampleBoutiqueList", "GET", '.swiper-wrapper')
						}
						setTimeout(()=>{
							// swiper将数据渲染到页面
							next(swiperlis.join(''), params.page <= ss.data.total);
							// 轮播渲染（需要在这位置，不然初始化dom时，样式渲染不上）
							certifySwiper = new Swiper('#certify .swiper-container', {
								watchSlidesProgress: true,
								slidesPerView: 'auto',
								centeredSlides: true,
								loop: true,
								observer: true,//修改swiper自己或子元素时，自动初始化swiper
								observeParents: true,//修改swiper的父元素时，自动初始化swiper
								loopedSlides: 3,
								autoplay: {
									delay: 2500,
									stopOnLastSlide: false,
									disableOnInteraction: false,
								},
							})
						})
						if(ss.status != 200) {
							showAlert({
								title: ss.data.msg,
								icon: 'error',
								text: '好的,我知道了'
							}, function() {})
						}
					}
					
				})
			}
		})
	})
}