文档章节

关于swiper的循环滚动

BigGod
 BigGod
发布于 2017/08/31 16:34
字数 856
阅读 99
收藏 0

大概功能就是上面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);
    }

 

循环逻辑后期补上。

© 著作权归作者所有

共有 人打赏支持
BigGod
粉丝 1
博文 13
码字总数 4842
作品 0
程序员
私信 提问
AngularJS 中使用Swiper制作滚动图不能滑动

Swiper是目前较为流行的移动端触摸滑动插件,因为其简单好用易上手,受到很多前端开发者的欢迎。 今天在使用Swiper的时候遇到这个问题: 使用angularjs动态循环生成swiper-slide类,在swipe...

冷冷gg
2016/11/15
405
0
微信小程序电商系统省市区选择器(二)

通过本文可以读到: 省级上下滚动展示scroll-view基本用法 省市级之间左右滑动展示swiper基本用法 data-index传值方法,wx:for循环语句、wf:if条件判断语句写法 先看下最终效果: 一、scrol...

秀杰
2016/12/27
1K
0
编写第二个页面:新闻阅读列表页面

笔记内容:编写第二个页面:新闻阅读列表页面笔记日期:2018-01-06 使用Swiper组件构建轮播图 关于Swiper组件的官方描述文档:https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper....

ZeroOne01
01/07
0
0
react-native-swiper组件-横扫你的轮播图

一念起,万水千山。一念灭,沧海桑田。 许久不曾召幸React Native爱妃,未曾想一见竟让寡人目瞪口呆。啥~~~你就说你买包包的速度能跟上你版本迭代更新的速度么。 小可爱.jpg 打开终端运行之前...

阡陌有客
2017/10/08
0
0
我用swiper和jquery写了一个导航小demo,在移动端点击不能跳转(不懂得地方我加了注释)

导航左右滚动,跳转切换 第一模块 第二模块 第三模块 第四模块 第五模块 第六模块 这是第一块 这是第二块 这是第三块 这是第四块 这是第五块 这是第六块

cc1596479381
2017/06/12
497
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周一乱弹 —— 温柔的人应该这样

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @clouddyy :#每日一歌# 《フィクション-sumika》 《フィクション-sumika》 手机党少年们想听歌,请使劲儿戳(这里) 假期时间干嘛去, @for...

小小编辑
41分钟前
10
4
[LintCode] Serialize and Deserialize Binary Tree(二叉树的序列化和反序列化)

描述 设计一个算法,并编写代码来序列化和反序列化二叉树。将树写入一个文件被称为“序列化”,读取文件后重建同样的二叉树被称为“反序列化”。 如何反序列化或序列化二叉树是没有限制的,你...

honeymose
今天
6
0
java框架学习日志-7(静态代理和JDK代理)

静态代理 我们平时去餐厅吃饭,不是直接告诉厨师做什么菜的,而是先告诉服务员点什么菜,然后由服务员传到给厨师,相当于服务员是厨师的代理,我们通过代理让厨师炒菜,这就是代理模式。代理...

白话
今天
27
0
Flink Window

1.Flink窗口 Window Assigner分配器。 窗口可以是时间驱动的(Time Window,例如:每30秒钟),也可以是数据驱动的(Count Window,例如:每一百个元素)。 一种经典的窗口分类可以分成: 翻...

满小茂
今天
19
0
my.ini

1

architect刘源源
今天
16
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部