文档章节

关于swiper的循环滚动

BigGod
 BigGod
发布于 2017/08/31 16:34
字数 856
阅读 91
收藏 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
基于盒马鲜生改编的微信小程序

前段时间,随着马化腾现身全国多地用微信小程序乘坐公交的新闻出现,微信小程序的热度可谓是更上了一层。微信小程序现身至今,因其不用下载就可使用的方便等优点,发展趋势一直良好。 盒马鲜...

TeanLee
2017/12/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Confluence 6 识别慢性能的宏

Page Profiling 给你了有关页面在载入的时候操作缓慢的邪教,你可以将下面的内容添加到调试(debug)级别: Version 3.1 及其后续版本 设置包名字为 com.atlassian.renderer.v2.components.M...

honeymose
13分钟前
0
0
day93-20180920-英语流利阅读-待学习

时尚之觞:外表光鲜靓丽,其实穷得要命 Lala 2018-09-20 1.今日导读 讲到时尚界,我们脑海里浮现的可能都是模特和设计师光鲜靓丽、从容潇洒的模样。可是,最近在法国出版的一本书却颠覆了我们...

飞鱼说编程
28分钟前
0
0
maven的pom.xml用解决版本问题

maven管理库依赖,有个好处就是连同库的依赖的全部jar文件一起下载,免去手工添加的麻烦,但同时也带来了同一个jar会被下载了不同版本的问题,好在pom的配置里面允许用<exclusion>来排除一些...

JAVA码猿
52分钟前
1
0
20180920 rzsz传输文件、用户和用户组相关配置文件与管理

利用rz、sz实现Linux与Windows互传文件 [root@centos01 ~]# yum install -y lrzsz # 安装工具sz test.txt # 弹出对话框,传递到选择的路径下rz # 回车后,会从对话框中选择对应的文件传递...

野雪球
今天
2
0
OSChina 周四乱弹 —— 毒蛇当辣条

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @ 达尔文:分享花澤香菜/前野智昭/小野大輔/井上喜久子的单曲《ミッション! 健?康?第?イチ》 《ミッション! 健?康?第?イチ》- 花澤香菜/前野智...

小小编辑
今天
42
11

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部