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

  • 相关阅读:
    spring mvc EL ModelAndView的 Model 值 在jsp中不显示
    maven修改本地仓库,远程仓库与中央仓库
    Maven 手动添加 JAR 包到本地仓库
    Maven项目的结构分析
    Maven 构建配置文件
    SVN使用出现的问题及解决方案
    Eclipse中SVN的安装步骤(两种)和使用方法
    Eclipse SVN 使用教程
    svn使用教程总结
    eclipse下配置安装ssm图文教程(web版)
  • 原文地址:https://www.cnblogs.com/wuweb/p/9263488.html
Copyright © 2011-2022 走看看