swiper动态加载数据修改数据，loop模式循环 需求：加载页⾯，请求所有的列表数据竖直显⽰，超过5个，开始轮播；点击按钮，筛选数据，不⾜5个的话不轮播，如果超过则开始滚动；swiper 4.0* HTML
<div class="project_list_wrap project_list_wrap2 swiper-container">
<div class="swiper-wrapper">
</div>
</div>
CSS
.project_list_wrap2 {
height: 350px;
}
.project__swiper {
height: auto;
}
.no_swiper .swiper-wrapper {
flex-direction: column;
}
.no_swiper .swiper-wrapper .project_item {
height: 60px;
margin-bottom: 10px;
}
JS
let listData1 = [{
title_1: '江汉区⽼年⼈能⼒评估点位审批111',
titel_2: '武汉市⽼年⼈能⼒评估',
source: '2019年武汉市养⽼项⽬⼯作',
date: '昨天 09:00 - 周三'
}, {
title_1: '江汉区⽼年⼈能⼒评估点位审批222',
titel_2: '武汉市⽼年⼈能⼒评估',
source: '2019年武汉市养⽼项⽬⼯作',
date: '昨天 09:00 - 周三'
}, {
title_1: '江汉区⽼年⼈能⼒评估点位审批333',
titel_2: '武汉市⽼年⼈能⼒评估',
source: '2019年武汉市养⽼项⽬⼯作',
date: '昨天 09:00 - 周三'
}, {
title_1: '江汉区⽼年⼈能⼒评估点位审批444',
titel_2: '武汉市⽼年⼈能⼒评估',
source: '2019年武汉市养⽼项⽬⼯作',
date: '昨天 09:00 - 周三'
}, {
title_1: '江汉区⽼年⼈能⼒评估点位审批555',
titel_2: '武汉市⽼年⼈能⼒评估',
source: '2019年武汉市养⽼项⽬⼯作',
date: '昨天 09:00 - 周三'
}, {
title_1: '江汉区⽼年⼈能⼒评估点位审批666',
自助式洗衣机titel_2: '武汉市⽼年⼈能⼒评估',
source: '2019年武汉市养⽼项⽬⼯作',
date: '昨天 09:00 - 周三'
}];
let listData2 = [{
let listData2 = [{
title_1: '江汉区⽼年⼈能⼒评估点位审批aaaa',
titel_2: '武汉市⽼年⼈能⼒评估',
source: '2019年武汉市养⽼项⽬⼯作',
date: '昨天 09:00 - 周三'
}, {
title_1: '江汉区⽼年⼈能⼒评估点位审批bbbb',
titel_2: '武汉市⽼年⼈能⼒评估',
source: '2019年武汉市养⽼项⽬⼯作',
date: '昨天 09:00 - 周三'
}, {
title_1: '江汉区⽼年⼈能⼒评估点位审批cccc',
titel_2: '武汉市⽼年⼈能⼒评估',
source: '2019年武汉市养⽼项⽬⼯作',
date: '昨天 09:00 - 周三'
}
/* , {
title_1: '江汉区⽼年⼈能⼒评估点位审批dddd',
titel_2: '武汉市⽼年⼈能⼒评估',
source: '2019年武汉市养⽼项⽬⼯作',
date: '昨天 09:00 - 周三'
}, {
title_1: '江汉区⽼年⼈能⼒评估点位审批eeee',
wo318
titel_2: '武汉市⽼年⼈能⼒评估',
source: '2019年武汉市养⽼项⽬⼯作',
date: '昨天 09:00 - 周三'
}, {
title_1: '江汉区⽼年⼈能⼒评估点位审批ffff',
titel_2: '武汉市⽼年⼈能⼒评估',
source: '2019年武汉市养⽼项⽬⼯作',
date: '昨天 09:00 - 周三'
}, {
title_1: '江汉区⽼年⼈能⼒评估点位审批gggg',
titel_2: '武汉市⽼年⼈能⼒评估',
source: '2019年武汉市养⽼项⽬⼯作',
date: '昨天 09:00 - 周三'
}, {
title_1: '江汉区⽼年⼈能⼒评估点位审批hhhh',
titel_2: '武汉市⽼年⼈能⼒评估',
内螺旋涡流金属分选机source: '2019年武汉市养⽼项⽬⼯作',
date: '昨天 09:00 - 周三'
} */
];
//app全局属性
const app = {};
app.html = {};
app.html.str = '';
app.swiper = null;
app.swiperViewLimitNum = 5; //轮播触发的个数
app.swiperContainerClass = '.project_list_wrap2 '
app.swiperWrapperClass = '.project_list_wrap2 .swiper-wrapper'; //初始化页⾯
function initPage() {挤压爆破
//加载数据
beforeTodayListGetData(listData1);
//点击按钮，切换数据
$('.toggleData').on('click', function () {
// debugger;
if (le) {
beforeTodayListGetData(listData2);
} else {
beforeTodayListGetData(listData1);
}
}
})
}
//获取数据渲染页⾯
function beforeTodayListGetData(data) {
const listData = data;
let dataLen = listData.length; //数据的个数
let dataListWrap = $(app.swiperWrapperClass);
let containerWrap = $(app.swiperContainerClass);
app.html.str = '';
for (let i = 0; i < listData.length; i++) {
app.html.str += '<div class="swiper-slide project_item">' +
'<div class="project_item_title_1 noWrap">' + listData[i].title_1 + '</div>' +
'<div class="project_item_title_2 noWrap">' + listData[i].titel_2 + '</div>' +
'<div class="project_item_source">' + listData[i].source + '</div>' +
'<div class="project_item_date">' + listData[i].date + '</div>' + '</div>';
};
//如果数据条数少于swiperViewLimitNum
if (dataLen <= app.swiperViewLimitNum) {
if (app.swiper) {
app.swiper.destroy(true, true); //销毁swiper
app.swiper = null;
}
/
* 不是swiper的情况 */
dataListWrap.append(app.html.str);
containerWrap.addClass('no_swiper');
$(app.swiperContainerClass).off('mouseover').off('mouseleave'); //解除事件绑定 } else {
setTimeout(() => {//渲染页⾯需要时间
if (app.swiper) {
//数据满⾜swiperViewLimitNum，可以轮播
app.swiper.update();
app.swiper.appendSlide(app.html.str); //添加slide
} else {
dataListWrap.append(app.html.str);
initSwiper()
}
}, 100);
}
}
//初始化轮播
function initSwiper() {
//配置项测井设备
let options = {
direction: "vertical",
initialSlide: 0, //⾃动滚动
autoplay: {
delay: 2000
},
loop: true, //形成环路
observer: true,
slidesPerView: app.swiperViewLimitNum,//可以显⽰的slides个数
spaceBetween: 10,//slides间隔
}
//初始化swiper
app.swiper = new Swiper(app.swiperContainerClass, options);
/
/绑定事件
//⿏标移⼊暂停轮播
$(app.swiperContainerClass).on('mouseover', function () {
智能控制模块
$(app.swiperContainerClass).on('mouseover', function () { app.swiper.autoplay.stop();
})
//⿏标移出开始轮播
$(app.swiperContainerClass).on('mouseleave', function () { app.swiper.autoplay.start();
})
}
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议