由于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问题的更多相关文章

  1. swiper结合ajax的轮播图

    Swiper 是什么:是纯JavaScript打造的滑动特效插件,能够实现触屏焦点图.触屏tab切换.触屏多图切换等常用效果. 开源.免费.稳定.应用广泛. 这就是swiper简单的介绍,由于是结合a ...

  2. 使用Swiper快速实现3D效果轮播

    最近经常接到轮播图3D效果的需求, 特在此记录一下以备之后使用. 具体实现效果如下: 在这里介绍两种使用方式, 一种原生的html+php后端渲染, 一种是使用vue. 原生实现 引入 首先我们介绍原 ...

  3. ThinkPHP 整合Bootstrap Ajax分页

    ThinkPHP Ajax分页代码 publicfunction index() { $where=array(); $name = I('name'); if(!empty($name)){ $wh ...

  4. 视频swiper轮播

    关于本次文章的内容,实际上是咪咕阅读详情页中的一个前端需求要做的效果,不过比起原需求,此次案例已经被删减掉许多部分了.音频部分舍弃,调用客户端接口舍弃,并做一些整理.最后留下的是这个精简版的案例.方便 ...

  5. 功能强大的swiper插件

    概述 今天体验了一下swiper,真是太强大了,无论是PC端还是移动端,各种轮播滑块效果随便实现.美中不足的是,有些实现需要自己想办法.下面我记录下我的需求和我的实现,供以后开发时参考,相信对其他人也 ...

  6. 【swiper轮播插件】解决swiper轮播插件触控屏问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. [转]谈谈前端渲染 VS 后端渲染

    首先,预编译跟前后端没有关系,预编译一样可以用于后端渲染. 看看下面的测试时间,单位: ms 模板字符串: var s = '{{#datas}}{{name}} abcdefg {{type}} { ...

  8. 移动端触摸滑动插件Swiper使用指南

    Swiper是一款开源.免费.功能十分强大的移动端内容触摸滑动插件,目前的最新版本是Swiper4.Swiper主要面向的是手机.平板电脑等移动设备,帮助开发者轻松实现触屏焦点图.触屏Tab切换.触屏 ...

  9. Swiper 常用功能及配置清单

    内容来源于Swiper中文在线(http://www.swiper.com.cn/),由于Swiper功能强大,这里只将常用的功能列出来,方便开发. 这里统一使用Swiper最新版 4.0做为演示! ...

随机推荐

  1. [翻译] MGConferenceDatePicker

    MGConferenceDatePicker https://github.com/matteogobbi/MGConferenceDatePicker MGConferenceDatePicker ...

  2. 企业级Nginx基于虚拟主机别名的设置

    生活中访问www.baidu.com和baidu.com是一个效果,同理也可以用rewrite 301跳转的思路(多发了一次请求过去)配置nginx.conf文件或者include里面的引用的文件,道 ...

  3. August 10th 2017 Week 32nd Thursday

    Break through the psychological barrier to surpass themselves. 突破心理障碍,才能超越自己. To break through those ...

  4. 解决问题,链表finish

    从一个不懂链表,到反反复复改了不下50遍,提交该题页数更是突破了五页,从周三下午到周五中午的面向对象课前的20分钟,终于把这道题AC了,其实这题本来是原来C语言综合实验的一道题,但是本次在PAT上的审 ...

  5. Tomcat是如何将请求一步步传递到我们编写的HttpServlet类中的

    我们平常编写好的HttpServlet类后,就可以处理请求了,但是服务器在接收到请求信息以后是如何将这些请求传递到我们编写的Servlet类中的???这个疑问在我心中的已经很久了,现在要来解决它. 我 ...

  6. BZOJ4446:[SCOI2015]小凸玩密室(树形DP)

    Description 小凸和小方相约玩密室逃脱,这个密室是一棵有n个节点的完全二叉树,每个节点有一个灯泡.点亮所有灯泡即可逃出密室. 每个灯泡有个权值Ai,每条边也有个权值bi.点亮第1个灯泡不需要 ...

  7. BZOJ1014:[JSOI2008]火星人(Splay,hash)

    Description 火星人最近研究了一种操作:求一个字串两个后缀的公共前缀.比方说,有这样一个字符串:madamimadam, 我们将这个字符串的各个字符予以标号:序号: 1 2 3 4 5 6 ...

  8. POJ3690 Constellations

    嘟嘟嘟 哈希 刚开始我一直在想二维哈希,但发现如果还是按行列枚举的话会破坏子矩阵的性质.也就是说,这个哈希只能维护一维的子区间的哈希值. 所以我就开了个二维数组\(has_{i, j}\)表示原矩阵\ ...

  9. 【CSS3】自定义滚动条样式 -webkit-scrollbar

    好文推荐:http://m.blog.csdn.net/article/details?id=40398177 http://www.xuanfengge.com/css3-webkit-scroll ...

  10. virtualbox+vagrant学习-4-Vagrantfile-8-WinSSH

    WinSSH WinSSH通信器是专门为OpenSSH的Windows本机端口构建的.它不依赖于类posix的环境,这种环境消除了额外的软件安装(如cygwin)以获得适当功能的需求. 想获得更多的信 ...