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 解决动态加载数据滑动失效的问题的更多相关文章
- swiper动态加载数据滑动失效,ajax执行后swiper.js的效果消失问题
使用swiper.js做一些动效时,如果进行了ajax,并且重新把DOM写入到HTML代码中,会导致swiper.js的特效消失的问题.原因是ajax加载后,原先new 的Swiper对象,不认识新来 ...
- js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...
- [JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件
页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空 ...
- 使用jquery的load方法设计动态加载,并解决被加载页面JavaScript失效问题
一.问题分析 对于后台系统,相比大家都有所印象,知道其中的布局结构,如图: 在这种布局中我们需要将header,sidebar,footer分开,而且对于中间部分的content内容需要动态变化,即根 ...
- echarts官网上的动态加载数据bug被我解决。咳咳/。
又是昨天,为什么昨天发生了这么多事.没办法,谁让我今天没事可做呢. 昨天需求是动态加载数据,画一个实时监控的折线图.大概长这样. 我屁颠屁颠的把代码copy过来,一运行,caocaocao~bug出现 ...
- mui 动态加载数据出现的问题处理 (silder轮播组件 indexedList索引列表 下拉刷新不能继续加载数据)
mui-slider 问题:动态给mui的图片轮播添加图片,轮播不滚动. 解决:最后把滚动轮播图片的mui(".mui-slider").slider({interval: 300 ...
- 微信小程序(五) 利用模板动态加载数据
利用模板动态加载数据,其实是对上一节静态数据替换成动态数据:
- 爬虫--selenuim和phantonJs处理网页动态加载数据的爬取
1.谷歌浏览器的使用 下载谷歌浏览器 安装谷歌访问助手 终于用上谷歌浏览器了.....激动 问题:处理页面动态加载数据的爬取 -1.selenium -2.phantomJs 1.selenium 二 ...
- 爬虫开发6.selenuim和phantonJs处理网页动态加载数据的爬取
selenuim和phantonJs处理网页动态加载数据的爬取阅读量: 1203 动态数据加载处理 一.图片懒加载 什么是图片懒加载? 案例分析:抓取站长素材http://sc.chinaz.com/ ...
随机推荐
- leetcode 748. Shortest Completing Word
Find the minimum length word from a given dictionary words, which has all the letters from the strin ...
- 脚踏实地学C#1-基元类型
基元类型:编译器直接支持的数据类型 基元类型直接映射到FCL类库上,如int 和Int32是等价的,只不过是int是c#提供的,Int32是FCL类库提供的. int只是Int32的别名 using ...
- python 简易音乐盒子
#!/usr/bin/env python#-*- coding:utf-8 -*- from Tkinter import *import tkMessageBoximport urllib def ...
- 「LuoguP3379」 【模板】最近公共祖先(LCA)
题目描述 如题,给定一棵有根多叉树,请求出指定两个点直接最近的公共祖先. 输入输出格式 输入格式: 第一行包含三个正整数N.M.S,分别表示树的结点个数.询问的个数和树根结点的序号. 接下来N-1行每 ...
- 采用个hook技术对writefile函数进行拦截(2)
http://www.cnblogs.com/zhxfl/archive/2011/11/03/2233846.html 这个是笔者之前写过的WriteFile HOOK代码 必须补充对这几个函数的H ...
- mtk lk阶段的lcm流程
一.lk进入kmain() 1. vendor/mediatek/proprietary/bootable/bootloader/lk/arch/arm/srt0.S bl kmain 二.初始化lk ...
- 子组件索引$refs
$refs只在组件渲染完成之后才填充,并且它是非响应式的,它仅仅作为一个直接访问访问子组件的应急方案-----应当避免的模板中或者计算属性中使用$refs
- NLTK vs SKLearn vs Gensim vs TextBlob vs spaCy
Generally, NLTK is used primarily for general NLP tasks (tokenization, POS tagging, parsing, etc.) S ...
- 【220】◀▶ IDL 数组操作函数说明
参考:Array Creation Routines —— 创建数组函数参考:Array Manipulation Routines —— 操作数组函数 01 MAX 最大值. 02 MIN ...
- HDFS源码分析一-概述
HDFS 主要包含 NameNode, SecondaryNameNode, DataNode 以及 HDFS Client . 我们从以下这几部分讲: 1. HDFS概述 2. NameNode 实 ...