• 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)
    })

  • 相关阅读:
    jdk与jre安装之后的名字
    手机用笔记本上网
    Django简易安装
    python 结巴分词
    Elasticsearch shield权限管理详解
    nginx配置初步
    linux 使用 rz 和 sz 命令
    eclipse 鲜为人知的调试技巧,你用过多少
    HDOJ 题目3555 Bomb(数位DP)
    Ubuntu1204 vim中文乱码解决方法
  • 原文地址:https://www.cnblogs.com/wuweb/p/9263488.html
Copyright © 2020-2023  润新知