文档章节

关于swiper的循环滚动

BigGod
 BigGod
发布于 2017/08/31 16:34
字数 856
阅读 109
收藏 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
微信小程序(看文档写实例三)微信小程序课堂宝APP实现整体界面框架及首页布局

一、首页布局简单思路 回顾上一篇博文,首页的内容主要有轮播图,横向滑动菜单以及菜单对应的view,横向滑动菜单有签到、课堂测试、模拟测试、课堂提问、答问记录五个选项,当点击选项时更新...

一枝韩独秀
2018/09/10
0
0
编写第二个页面:新闻阅读列表页面

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

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

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

阡陌有客
2017/10/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Jenkins系列_插件安装及报错处理

进入Jenkins之后我们可以进行插件的安装,插件管理位于以下模块: 发现上面报了一堆错误,是因为插件的依赖没有安装好,那么这一节,就先把这些错误解决掉吧。解决完成后,也就基本会使用插件...

shzwork
今天
2
0
mysql mysql的所有查询语句和聚合函数(整理一下,忘记了可以随时看看)

查询所有字段 select * from 表名; 查询自定字段 select 字段名 from 表名; 查询指定数据 select * from 表名 where 条件; 带关键字IN的查询 select * from 表名 where 条件 [not] in(元素...

edison_kwok
昨天
9
0
多线程同时加载缓存实现

import com.google.common.cache.Cache;import com.google.common.cache.CacheBuilder;import java.util.concurrent.ExecutionException;import java.util.concurrent.ExecutorServi......

暗中观察
昨天
3
0
利用VisualVM 内存查看

准备工作,建几个测试类。等下就是要查看这几个类里面的属性 package visualvm;public class MultiObject { private String str; private int i; MultiObject(String str...

冷基
昨天
2
0
组装一台工作游戏两用机

一、配置清单如下: 分类 项目 价格(元) 主板 华硕(ASUS)TUF Z370-PLUS GAMING II 电竞特工 Z370二代 支持9代CPU 1049 CPU 英特尔(Intel) i7 8700K 酷睿六核 盒装CPU处理器 2640 风扇 九...

mbzhong
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部