您的位置：首页 > 其它

swiper支持动态加载数据

2018-01-24 20:39 344 查看

用swiper插件动态加载数据：动态获取完数据之后，在初始化swiper.

1、在<head>标签里面加入swiper的css和js文件

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>

2、html如下：

<div class="swiper-container">
<div class="swiper-wrapper" id="swiperWrapper">

</div>
<div class="swiper-button-prev swiper-button-white"></div>
<div class="swiper-button-next swiper-button-white"></div>
</div>

3、js如下：
function handlePascreenImg(datas){
var len = datas.length,
DOMObj = null, //img
obj = null, //保存当前对象
img_path = '', //图片名
price = '', //霸屏每秒的价钱
paScreenType = '', //霸屏的type
name = '', //霸屏图片的名字
src = ''; //图片路径

// 清除上次的数据
$('#swiperWrapper').empty();
for( var i=0;i<len;i++ ){
obj = datas[i],
img_path = obj.img_path,
price = obj.price,
paScreenType = obj.type,
name = obj.name,
src = globalConfig.pre_api_url + '/wxwall_api/good/img/' + img_path;

var imgList = '<div class="swiper-slide">' +
'<img id="img'+i+'" src="'+src+'" name="'+name+'" paScreenType="'+paScreenType+'" price="'+price+'" >' +
'</div>';

$('#swiperWrapper').append(imgList);
if( i == len-1 ){
$('#paScreenTxt').text($('#img0').attr('name'));

// 在获取数据之后，在对swiper进行初始化,解决动态加载的问题
mySwiper = new Swiper(".swiper-container",{
direction:"horizontal",/*横向滑动*/
// loop:true,/*形成环路（即：可以从最后一张图跳转到第一张图*/
prevButton:".swiper-button-prev",/*前进按钮*/
nextButton:".swiper-button-next",/*后退按钮*/
onSlideChangeStart:function(swiper){
// 监听swiper滑动事件,更换图片上方文字
var index = swiper.activeIndex;
$('#paScreenTxt').text( $('#img'+index).attr('name') );
}
});
}
}

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航