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

  • 相关阅读:
    如何弹出QQ临时对话框实现不添加好友在线交谈效果
    让sublime text3支持Vue语法高亮显示[转]
    spa(单页面应用)的优缺点[转]
    vue-devtoools 调试工具安装
    元素视差方向移动jQuery插件-类似github 404页面效果
    js删除数组元素、清空数组的简单方法
    sublime text3 setting-user
    vue环境搭建
    Starting httpd:Could not reliably determine the server's fully qualified domain name
    使用传输表空间迁移数据
  • 原文地址:https://www.cnblogs.com/wuweb/p/9263488.html
Copyright © 2011-2022 走看看