zoukankan      html  css  js  c++  java
  • 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)
    })

  • 相关阅读:
    ASP.NET AJAX(6)__Microsoft AJAX Library中的面向对象类型系统
    ASP.NET AJAX(8)__Microsoft AJAX Library中异步通信层的使用
    ASP.NET AJAX(4)__客户端访问WebService
    ASP.NET AJAX(10)__Authentication Service
    ASP.NET AJAX(3)__UpdatePanel
    ASP.NET AJAX(5)__JavaScript原生类型以及Microsoft AJAX Library
    ASP.NET AJAX(2)__ASP.NET 2.0 AJAX Extensions
    ASP.NET AJAX(9)__Profile Service
    Interesting Video Lecture For Computer Science, Especially for Machine Learning
    基于BindingSource的WinForm开发
  • 原文地址:https://www.cnblogs.com/wuweb/p/9263488.html
Copyright © 2011-2022 走看看