时间:2021-05-26
两种解决方法
1、数据加载后进行swiper初始化
success:function(result){var resultdata =eval("("+result+")");if(resultdata.status == 1){ var dataList = resultdata.data; currentPage = resultdata.currentPage; pageCount = resultdata.pageCount; var html = ""; if(pageCount == 0){ html ='<div class="noCollect">' + resultdata.msg + '</div>'; }else{ for(var i in dataList){ var data = dataList[i]; html += '<div class="swiper-container artistDiv">' + '<div class="swiper-wrapper">' + '<div class="swiper-slide workDiv">' + '<div class="app_inlineBlock workPic">' + '<img class="picImg" src="'+ data.artistAvatar +'" />' + '</div>'+'<div class="app_inlineBlock workInfo">' + '<div class="artistName">' + data.artistName + '</div>' + '<div class="workName">' + data.artworkName + '</div>' + '<div class="workValue">'+ data.typeName +'/'+ data.width + '*' + data.height +'/' +data.createYear + '</div>' + '</div><div class="app_inlineBlockRight workPrice">' + '<div class="price">¥'+ data.marketPrice +'</div></div></div>' + '<div class="swiper-slide delBtn">删除</div></div></div>'; } } $("#list").append(html); //swiper初始化 var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', slidesPerView: 'auto', paginationClickable: true, spaceBetween: 0 });}2、swiper初始化加两行代码
swiper1 = new Swiper('.swiper-container', { initialSlide :0, observer:true,//修改swiper自己或子元素时,自动初始化swiper observeParents:true//修改swiper的父元素时,自动初始化swiper });以上这篇swiper 解决动态加载数据滑动失效的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
Vue使用swiper插件时特别是轮播元素含有动态数据时可能会出现数据为空或者白屏的问题使用下面的方法可以解决(保证在数据请求之后再渲染页面)页面结构{{top
使用Swiper开发移动端页面,轻松实现图片的轮播。swiper1.主要包含模块:swiper:指滑动、切换(整个滑动对象,有时特指滑块释放后仍然正向移动直到贴
1.基本结构:Swiper:整个滑动对象,有时特指滑块释放后仍然正向移动直到贴合边缘的过程(过渡);Container:Swiper的容器,里面包括滑动块(sl
内容:1、滑动优化(滑动时不加载图片,停止才加载)2、第一次进入时手动加载代码如下:1、界面布局2、开启异步解析数据packagecom.example.lei
一、EasyUI树形网格动态加载动态加载树形网格有助于从服务器上加载部分的行数据,避免加载大型数据的长时间等待。本教程将向您展示如何创建带有动态加载特性的树形网