ajax渲染swiper问题
由于ajax异步请求的关系,所以之前将swiper初始化写在请求外面时总是不能达到效果。下面是能正常渲染的效果示例:
$http({
method:"GET",
url:"请求接口",
dataType:"json"
}).success(function(res){
$scope.configs.bannerData=res.content.bannerList;
var mySwiper = new Swiper ('.swiper-container', {
loop: true,
autoplay:{
delay:3000,
stopOnLastSlide:false,
disableOnInteraction:false
},
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
clickable :true,
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
observer:true,//修改swiper自己或子元素时,自动初始化swiper
observeParents:true//修改swiper的父元素时,自动初始化swiper
})
})
但是这样会出现一个问题,就是swiper虽然设置啦无限循环loop但是并没有用。解决方法是初始化是加一个定时器,哪怕时间设置为0:
$http({
method:"GET",
url:"https://cloud.alilo.com.cn/baby/api/wx/getBannerList",
dataType:"json"
}).success(function(res){
$scope.configs.bannerData=res.content.bannerList;
$timeout(function(){
var mySwiper = new Swiper ('.swiper-container', {
loop: true,
autoplay:{
delay:3000,
stopOnLastSlide:false,
disableOnInteraction:false
},
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
clickable :true,
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
observer:true,//修改swiper自己或子元素时,自动初始化swiper
observeParents:true//修改swiper的父元素时,自动初始化swiper
})
},0)
})
ajax渲染swiper问题的更多相关文章
- swiper结合ajax的轮播图
Swiper 是什么:是纯JavaScript打造的滑动特效插件,能够实现触屏焦点图.触屏tab切换.触屏多图切换等常用效果. 开源.免费.稳定.应用广泛. 这就是swiper简单的介绍,由于是结合a ...
- 使用Swiper快速实现3D效果轮播
最近经常接到轮播图3D效果的需求, 特在此记录一下以备之后使用. 具体实现效果如下: 在这里介绍两种使用方式, 一种原生的html+php后端渲染, 一种是使用vue. 原生实现 引入 首先我们介绍原 ...
- ThinkPHP 整合Bootstrap Ajax分页
ThinkPHP Ajax分页代码 publicfunction index() { $where=array(); $name = I('name'); if(!empty($name)){ $wh ...
- 视频swiper轮播
关于本次文章的内容,实际上是咪咕阅读详情页中的一个前端需求要做的效果,不过比起原需求,此次案例已经被删减掉许多部分了.音频部分舍弃,调用客户端接口舍弃,并做一些整理.最后留下的是这个精简版的案例.方便 ...
- 功能强大的swiper插件
概述 今天体验了一下swiper,真是太强大了,无论是PC端还是移动端,各种轮播滑块效果随便实现.美中不足的是,有些实现需要自己想办法.下面我记录下我的需求和我的实现,供以后开发时参考,相信对其他人也 ...
- 【swiper轮播插件】解决swiper轮播插件触控屏问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [转]谈谈前端渲染 VS 后端渲染
首先,预编译跟前后端没有关系,预编译一样可以用于后端渲染. 看看下面的测试时间,单位: ms 模板字符串: var s = '{{#datas}}{{name}} abcdefg {{type}} { ...
- 移动端触摸滑动插件Swiper使用指南
Swiper是一款开源.免费.功能十分强大的移动端内容触摸滑动插件,目前的最新版本是Swiper4.Swiper主要面向的是手机.平板电脑等移动设备,帮助开发者轻松实现触屏焦点图.触屏Tab切换.触屏 ...
- Swiper 常用功能及配置清单
内容来源于Swiper中文在线(http://www.swiper.com.cn/),由于Swiper功能强大,这里只将常用的功能列出来,方便开发. 这里统一使用Swiper最新版 4.0做为演示! ...
随机推荐
- Nginx学习---企业级nginx环境搭建
1.1. nginx安装环境 1.系统要求 nginx是C语言开发,建议在linux上运行,本教程使用Centos6.5作为安装环境. 1-1 安装 GCC 源码安装nginx需要依赖gcc环境,需要 ...
- strncpy()函数【转】
C/C++中的strncpy()函数功能为将第source串的前n个字符拷贝到destination串,原型为: char * strncpy ( char * destination, const ...
- 沉淀再出发:用python画各种图表
沉淀再出发:用python画各种图表 一.前言 最近需要用python来做一些统计和画图,因此做一些笔记. 二.python画各种图表 2.1.使用turtle来画图 import turtle as ...
- ETCD TLS 配置的坑
一.环境准备 环境总共 3 台虚拟机,系统为centos7,1个 master,2 个 etcd 节点,master 同时也作为 node 负载 pod,在分发证书等阶段将在另外一台主机上执行,该主机 ...
- mysql_fetch_row,mysql_fetch_array,mysql_fetch_object,mysql_fetch_assoc
php从mysql中访问数据库并取得数据,取得结果的过程中用到好几个类似的方法,区别及用法值得区分一下,看下面的代码 代码如下: <?php $link=mysql_connect('local ...
- PhoneGap API 之事件处理
一. deviceready 事件 1.在使用 PhoneGap 开发应用时,deviceready 事件是非常常用的.这一事件在设备的本地 环境和页面完全加载完成之后才触发 2.注意:此事件一般晚于 ...
- BZOJ 1015 星球大战starwar 逆向并查集
题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=1015 题目大意: 很久以前,在一个遥远的星系,一个黑暗的帝国靠着它的超级武器统治者整个 ...
- 【[SCOI2009]迷路】
大水题一遍 过掉比较繁琐的拆点还是非常开心的 发现每一条边的边权可能不是\(1\),但是边权的范围非常小,同时点数也非常小,只有\(n<=10\),所以我们可以将一个点拆成九个点,之后随便一连边 ...
- [Python 多线程] GIL全局解释器锁 (十三)
Queue 标准库queue模块,提供FIFO(先进先出)的Queue.LIFO(后进先出)的队列.优先队列. Queue类是线程安全的,适用于多线程间安全的交换数据.内部使用了Lock和Condit ...
- 俄罗斯方块 UWP 版
UWP跟 WPF编程模型一致,不过UWP做了精简,而且不同的系统的API还略有不同.不同的地方有以下几点: 1.动画.动画除了故事版,还有其它的实现方式. 2.异步方法.UWP中的方法调用,大部分都是 ...