文档章节

关于swiper的循环滚动

BigGod
 BigGod
发布于 2017/08/31 16:34
字数 856
阅读 74
收藏 0
点赞 0
评论 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
关于setInterval与setTimeout作用域问题

最近在模仿swiper鼓捣一个轮播图插件时,碰到了setInterval的作用域问题,轮播的方法写在一个对象里,但是setInterval执行这个方法后,在方法体内无法访问这个对象的属性了,业务逻辑代码如下...

爱coding的husky
2017/11/03
0
0
Framework7 v1.5.2 发布,HTML 移动端框架

Framework7 v1.5.2 发布了。Framework7 是全功能的绑定 iOS 7 应用的 HTML 框架。Framework7 是免费开源的 HTML 移动端框架,用来开发混合移动端应用或者 iOS 7 的 Web 应用,并且带有 iOS ...

达尔文
2016/12/18
4.7K
6
js+hmtl+css3 鼠标滚动页面左右实现transform3D滚动

前端html页面,使用mousewheel监听鼠标滚动,根据滚轴的滚帧做多少的transform3D位移。使用swiper的 mousewheelSensitivity 可以实现该效果,但页面的图片会有一个无解的bug效果; 使用horwh...

大侠请重新来过
2017/12/08
21
1
超棒的JS移动设备滑动内容幻灯实现 - Swiper

来源:GBin1.com 在线演示 如果你需要一款帮助你实现手机或者移动设备上内容幻灯实现的JS类库的话 , Swiper是一个不错的选择,它不依赖于任何第三方的类库。因此体积非常小,适合运行在移动...

gbin1
2013/06/25
431
2

没有更多内容

加载失败,请刷新页面

加载更多

下一页

vue组件及路由理论知识

一、 组件component 1. 什么是组件? 组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码组件是自定义元素(对象) 2. 定义组件的方式 方式1:先创建...

一个yuanbeth
刚刚
0
0
Saltstack配置之 nodegroups

#cd /etc/salt #mkdir master.d #vim node.conf //按组写入文件 nodegroups: client_all: 'L@192.168._._,192.168._._' clienta: 'L@192.168.192._' clientb: 'L@192.168.192._' #/etc/init......

硅谷课堂
7分钟前
0
0
expect(spawn) 自动化git提交和scp拷贝---centos(linux)

**在进行SCP文件拷贝中,往往需要进行用户密码的输入,即用户交互。若采用自动化脚本的方式进行,则可用以下方式: ** #!/usr/bin/expect #设置参数 set src [lindex $argv 0] set dest [lin...

helplove
11分钟前
1
0
用Build来构建对象的写法

如果一个类的属性过多,用构造器来构建对象很难写,因此我们时用Build方式来构建对象。写法大致如下。 import java.io.Serializable;import java.util.Date;public class Log impleme...

算法之名
13分钟前
11
0
利用 acme.sh 获取网站证书并配置https访问

acme.sh 实现了 acme 协议, 可以从 letsencrypt 生成免费的证书.(https://github.com/Neilpang/acme.sh/wiki/%E8%AF%B4%E6%98%8E) 主要步骤: 安装 acme.sh 生成证书 copy 证书到 nginx/ap...

haoyuehong
26分钟前
2
0
微擎框架内如何根据media_id获取到微信图片的路径

微擎的框架内,图片选择后,获取的是那个字符串是media_id,相当于你这张图片在微信的图片服务器里面的id 要求是:获取https://mmbiz.qpic.cn/mmbiz_jpg/…… 微信图片的路径 而微信并没有根据m...

老bia同学
30分钟前
2
0
Spring boot中日期的json格式化

Model 在model层中,类的日期属性上面添加如下注解: @JsonFormat(shape = JsonFormat.Shape.STRING, pattern = "yyyy-MM-dd hh:mm:ss") 参考 Jackson Date格式化教程...

亚林瓜子
32分钟前
2
0
Eclipse:Failed to load the JNI shared library

1.问题背景: 由于我之前使用jdk1.9学习,当使用Luke的时候发现jdk版本过高,需要向下配置jdk,就向朋友拷了一个安装包。重新配置路径后,便开始报错。 2.问题描述: Failed to load the JNI...

tinder_boy
34分钟前
1
0
少儿学习编程课程是否真的适合七八岁的低龄儿童[图]

少儿学习编程课程是否真的适合七八岁的低龄儿童[图]: 天下熙熙皆为利来,天下攘攘皆为利往。 这几年来,乐高教育机构在国内如同雨后春笋般出现,当然关闭/转手的也很多。从教师角度来看,部...

原创小博客
40分钟前
1
0
ES12-词项查询

1.词项查询介绍 全文查询将在执行之前分析查询字符串,但词项级别查询将按照存储在倒排索引中的词项进行精确操作。这些查询通常用于数字,日期和枚举等结构化数据,而不是全文本字段。 或者,...

贾峰uk
48分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部