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

  • 相关阅读:
    Head First设计模式读书笔记
    通过FileReference打开本地图片崩溃的解决方法
    Asea——轻量级的AS3模块配置与加载管理库
    AGAL反编译器
    [Stage3D]硬件加速的径向模糊
    C#的timer类问题~!
    c语言中的大数运算模块
    TRACERT命令及用法
    Linux用户和用户组的管理概述
    linux下挂载windows的共享文件目录ftp文件夹到/root/wind目录
  • 原文地址:https://www.cnblogs.com/wuweb/p/9263488.html
Copyright © 2020-2023  润新知