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自己或子元素时，自动初始化swiperobserveParents: true,//修改swiper的父元素时，自动初始化swiperloopedSlides: 3,autoplay: {delay: 2500,stopOnLastSlide: false,disableOnInteraction: false,},})})if(ss.status != 200) {showAlert({title: ss.data.msg,icon: 'error',text: '好的,我知道了'}, function() {})}}})}})})
}

swiper（左右滑动）动态加载数据相关推荐

swiper支持动态加载数据
用swiper插件动态加载数据:动态获取完数据之后,在初始化swiper. 1.在<head>标签里面加入swiper的css和js文件 <link rel="styles ...
HelloChart框架动态加载数据
HelloChart框架动态加载数据之前使用MPAndroidChart做过一个动态加载数据的折线统计图,完成如下功能: 一个动态加载数据的图表,首次进入加载20条,并且视图显示在最右边,然后滑动到 ...
用爬虫抓取动态加载数据丨Python爬虫实战系列(6)
提示:最新Python爬虫资料/代码练习>>戳我直达前言抓取动态加载数据话不多说,开练! 爬虫抓取动态加载数据确定网站类型首先要明确网站的类型,即是动态还是静态.检查方法:右键查 ...
android listview动态加载数据,ListView动态加载数据
当listview需要加载的数据过多时,若一次性载入则速度会相当缓慢,影响用户体验,这时候就需要动态加载数据,即每次载入固定长度的数据,android market的listview就是采用这种方式, ...
iscroll动态加载数据完美解决方案
iscroll动态加载数据完美解决方案参考文章: (1)iscroll动态加载数据完美解决方案 (2)https://www.cnblogs.com/ShoneH/p/5253758.html (3 ...
如何在 InfoPath 2003 表单中动态加载数据
转自微软:http://support.microsoft.com/kb/896451/zh-cn 概要简介更多信息创建新的虚拟目录设计 Microsoft Office InfoPath 2 ...
ASP.NET MVC动态加载数据
ASP.NET MVC动态加载数据,一般的做法是使用$.each方法来循环产生tabel: 你可以在html时先写下非动态的部分: <table><tr><th styl ...
python爬取js加载的数据_JS动态加载数据不会爬？老司机教你两个方法爬取想要的数据...
学习Python的人绝大部分都是在用Python做爬虫,毕竟对于爬虫而言Python是不二选. 但是一般简单的静态页面网站还是很好爬取的,对于很多动态加载的网站就不知道怎么办了,今天小编就给大家介绍两 ...
echarts java动态数据_[ASP.net教程]ECharts Java 动态加载数据，echartsjava
[ASP.net教程]ECharts Java 动态加载数据,echartsjava 0 2015-12-18 00:00:05 1.前台jsp页面html PUBLIC "-//W3C// ...
selectpicker 动态加载数据
在做二级下拉菜单动的时候,一般需要动态的给第二个下拉菜单赋值(有时候第一个下拉菜单也是动态加载数据),一般的下拉框的样式比较丑,当使用selectpicker进行下拉菜单美化时,有可能导致下拉菜单加载 ...

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

swiper（左右滑动）动态加载数据相关推荐

最新文章

热门文章