关于swiper的循环滚动

2019独角兽企业重金招聘Python工程师标准>>>

大概功能就是上面5个圈无线循环滚动，每次滑动中间的变大，下面显示中间的圈所对应的内容。

               

html代码

    <!-- Swiper -->
    <div class="swiper-container">
      <div class="swiper-wrapper"></div>
    </div>

js代码

//初始化数据  
 $scope.deskList = [{
      "serviceDeskOid": "111111",
      "category": "Admin",
      "enable": true,
      "serviceDeskDetails": [{
        "serviceDeskOid": "123",
        "serviceDeskDetailOid": "123",
        "type": "机票预定（7*24）",
        "pattern": "Contact模式",
        "url": "123",
        "contact": "123",
        "description": "描述",
        "briefDesc": "描述"
      }, {
        "serviceDeskOid": "34b96ef6-e",
        "serviceDeskDetailOid": "771461279b003",
        "type": "机票预定（5*8）",
        "pattern": "Contact模式",
        "url": "",
        "contact": "",
        "description": "测试数据",
        "briefDesc": "测试数据"
      }, {
        "serviceDeskOid": "34b96ef6-8a28be",
        "serviceDeskDetailOid": "f28170757b11254f",
        "type": "会议服务",
        "pattern": "Contact模式",
        "url": "",
        "contact": "",
        "description": "1.预作段和需连续多报修",
        "briefDesc": "提供会议持服务"
      }]
    }, {
      "serviceDeskOid": "acefd0309a",
      "category": "Fin.",
      "enable": true,
      "serviceDeskDetails": [{
        "serviceDeskOid": "acef84309a",
        "serviceDeskDetailOid": "b824fcd2",
        "type": "供应商付款资讯",
        "pattern": "Q&A模式",
        "url": "",
        "contact": "",
        "phone": "",
        "email": "",
        "description": "银行付款流程",
        "briefDesc": ""
      }, {
        "serviceDeskOid": "acefd0884309a",
        "serviceDeskDetailOid": "5825dc133",
        "type": "员工报销资讯",
        "pattern": "Q&A模式",
        "url": "",
        "contact": "",
        "phone": "",
        "email": "",
        "description": "现金及差旅报销流程",
        "briefDesc": ""
      }]
    }, {
      "serviceDeskOid": "f8d174948",
      "category": "HR",
      "enable": true,
      "serviceDeskDetails": [{
        "serviceDeskOid": "f8d192b4-c174948",
        "serviceDeskDetailOid": "2d9253a9a35a",
        "type": "HR服务",
        "pattern": "Contact模式",
        "url": "",
        "contact": "",
        "description": "咨询HR相操作等问题",
        "briefDesc": ""
      }, {
        "serviceDeskOid": "f8d1fa74948",
        "serviceDeskDetailOid": "37ead17d63c9f166",
        "type": "医疗保险客服热线（非工作时间）",
        "pattern": "Contact模式",
        "url": "",
        "contact": "",
        "description": "了解商业保险保障内容，保险理赔流程，理赔查询等",
        "briefDesc": ""
      }, {
        "serviceDeskOid": "f8d174948",
        "serviceDeskDetailOid": "122696920a",
        "type": "医疗保险客户代表（仅工作时间）",
        "pattern": "Contact模式",
        "url": "",
        "contact": "孙玲",
        "description": "了解商业保险保障内容，保险理赔流程，理赔查询等",
        "briefDesc": ""
      }, {
        "serviceDeskOid": "f8fa174948",
        "serviceDeskDetailOid": "b363ece9fdbcf",
        "type": "医疗保险客户代表（仅工作时间）",
        "pattern": "Contact模式",
        "url": "",
        "contact": "倪薇樺",
        "description": "了解商业保险保障内容，保险理赔流程，理赔查询等",
        "briefDesc": ""
      }, {
        "serviceDeskOid": "f8d192b4fa174948",
        "serviceDeskDetailOid": "bdac2491c433",
        "type": "工资咨询",
        "pattern": "Contact模式",
        "url": "",
        "contact": "",
        "phone": "4006700076",
        "email": "",
        "description": "工资单密码查询，工资明细咨询等",
        "briefDesc": ""
      }]
    }, {
      "serviceDeskOid": "2e157ca57",
      "category": "Legal",
      "enable": true,
      "serviceDeskDetails": [{
        "serviceDeskOid": "2e15b6a57",
        "serviceDeskDetailOid": "be67c8a4558",
        "type": "法务审核流程Q&A",
        "pattern": "Q&A模式",
        "url": "",
        "contact": "",
        "description": "合同审核流程",
        "briefDesc": ""
      }, {
        "serviceDeskOid": "2e15b17a-67ca57",
        "serviceDeskDetailOid": "e53cc11f4c8",
        "type": "合规举报热线",
        "pattern": "Contact模式",
        "url": "",
        "contact": "",
        "description": "合规举报热线com",
        "briefDesc": ""
      }]
    }, {
      "serviceDeskOid": "a122c22d-ca1785b4b2",
      "category": "IT",
      "enable": true,
      "serviceDeskDetails": [{
        "serviceDeskOid": "a122c27b1785b4b2",
        "serviceDeskDetailOid": "94f92901507ace",
        "type": "BI",
        "contact": "",
        "phone": "",
        "email": "",
        "description": null,
        "briefDesc": ""
      }, {
        "serviceDeskOid": "a122c22d-b1785b4b2",
        "serviceDeskDetailOid": "ac60b976-5e8d8b",
        "type": "IT服务热线（8:00～19:00）",
        "pattern": "Contact模式",
        "url": "",
        "contact": "",
        "description": "1.桌面系统问题支持",
        "briefDesc": "提供IT相关支持服务"
      }, {
        "serviceDeskOid": "a122c22d-cac9-4785b4b2",
        "serviceDeskDetailOid": "828-33afc",
        "type": "IT服8:00）",
        "pattern": "Contact模式",
        "url": "",
        "contact": "",
        "description": "1.桌面系题支持",
        "briefDesc": "提供I持服务"
      }]
    }];

    var count = $scope.deskList.length;
    for (var i = 0; i < $scope.deskList.length; i++) {
      if ($scope.deskList[i].category.toUpperCase() === "ADMIN") {
        var meeting = {
          "serviceDeskOid": "34b96ef6-930c-4691-94d6-978ab88a28be",
          "serviceDeskDetailOid": "d9fda16e-6758-4b02-9e92-a2ed716850a8",
          "type": "会议室地图",
          "pattern": "Contact模式",
          "url": "",
          "contact": "",
          "phone": "",
          "email": "",
          "description": "meeting",
          "briefDesc": "提供各楼层平面图"
        };
        $scope.deskList[i].serviceDeskDetails.unshift(meeting);
      }
    }
    console.log("=======", angular.toJson(count, true));
    var loopCount = 9;
    var index = 0;
    var halfLoop = parseInt(loopCount / 2) + 1;
    var halfStart = halfLoop * count;
    var halfEnd = (halfLoop + 1) * count;
    console.log("=======", angular.toJson(halfLoop, true));
    console.log("=======", angular.toJson(halfStart, true));
    console.log("=======", angular.toJson(halfEnd, true));

    var swiper = new Swiper('.swiper-container', {
      spaceBetween: 10,
      slidesPerView: 5,
      centeredSlides: true,
      slideToClickedSlide: true,
      grabCursor: true,
      onSlidePrevEnd: function (swiper) {
        console.log("onSlidePrevEnd", swiper.realIndex);
        console.log(index);
        index = swiper.realIndex % count;
        if (swiper.realIndex < halfStart) {
          swiper.slideTo(halfStart + index, 0, false)
        }
        getList(index);
      },
      onSlideNextEnd: function (swiper) {
        index = swiper.realIndex % count;
        console.log("onSlideNextEnd", swiper.realIndex);
        console.log(index);
        if (swiper.realIndex > halfEnd) {
          swiper.slideTo(halfStart + index, 0, false)
          console.log("========", halfStart + index);
        }
        getList(index);
      },
    });

    for (var j = 0; j < loopCount; j++) {
      for (var i = 0; i < count; i++) {
        swiper.appendSlide('<div class="swiper-slide"><div class="allColor"><div class="write"><span class="singleColor">'
          + $scope.deskList[i].category + '</span></div></div></div>'
        );
      }
    }
    swiper.slideTo(halfStart, 0, false);
    console.log(angular.toJson(swiper.realIndex, true));
    console.log(angular.toJson(index, true));
    $scope.selectDetail = $scope.deskList[0];
    console.log(angular.toJson($scope.selectDetail, true));

    function getList(index) {
      $scope.view.status = true;
      $scope.selectDetail = "";
      $timeout(function () {
        $scope.selectDetail = $scope.deskList[index];
        if ($scope.selectDetail.category.toUpperCase() === "ADMIN") {
          $scope.view.sf = true;
        } else {
          $scope.view.sf = false;
        }
        $scope.view.status = false;
      }, 10);
    }

 

循环逻辑后期补上。

转载于:https://my.oschina.net/666666hq/blog/1527034