controller.js中定义swipers指令:

  1. var moduleCtrl = angular.module('newscontroller',['infinite-scroll','ngTouch','news.service'])
  2. .directive('swipers',swipers);
  3. swipers.$inject = ['$timeout'];
  4. function swipers($timeout) {
  5. return {
  6. restrict: "EA",
  7. scope: {
  8. data:"="
  9. },
  10. template: '<div class="swiper-container" ng-if="data.dlfList.length>0" id="swiper-container1">'+
  11. '<div class="swiper-wrapper">'+
  12. '<div class="swiper-slide" ng-repeat="swiperList in data.dlfList">'+
  13. '<a ng-href="{{swiperList.isLink}}" ng-if="swiperList.classify==\'zt\'">'+
  14. '<div class="img-wrap">'+
  15. '<img ng-src="{{swiperList.picture}}" alt="{{swiperList.title}}" class="thumbpic">'+
  16. '</div><div class="dl_font_title dl_font_title_swiper" ng-bind="swiperList.title"></div>'+
  17. '<div class="source" ng-bind="swiperList.source"></div></a>' +
  18. '<a ng-if="swiperList.classify!=\'zt\'" ng-click="newsDetail(swiperList.id,swiperList.classify,swiperList.pubtime)">'+
  19. '<div class="img-wrap"><img ng-src="{{swiperList.picture}}" alt="{{swiperList.title}}" class="thumbpic">'+
  20. '<div class="numWrap" ng-if="swiperList.classify==\'pic\'">'+
  21. '<img class="swiper-numpic" src="http://dw.chinanews.com/chinanews/resource/mnapp/img/num.png">'+
  22. '<div class="swiper-num" ng-bind="swiperList.picCount"></div></div>'+
  23. '<div class="numWrap" ng-if="swiperList.classify==\'zb\'">'+
  24. '<img class="swiper-numpic" src="http://dw.chinanews.com/chinanews/resource/img/live.png"></div>'+
  25. '<div class="numWrap" ng-if="swiperList.classify==\'zy\'">'+
  26. '<img class="swiper-numpic" src="http://dw.chinanews.com/chinanews/resource/mnapp/img/num.png">'+
  27. '<div class="swiper-num">专题</div></div></div>'+
  28. '<div class="dl_font_title dl_font_title_swiper" ng-bind="swiperList.title"></div>'+
  29. '<div class="source" ng-bind="swiperList.source"></div></a>'+
  30. '</div></div></div>',
  31. link: function(scope, element, attrs) {
    if(scope.$last){//最后一个循环项加载完成后初始化
  32. $timeout(function(){
  33. var swiper = new Swiper('.swiper-container', { //轮播图绑定样式名
  34. slidesPerView: 'auto',
  35. spaceBetween: 10
  36. });
  37. },100);
    }
  38. }
  39. };
  40. }

index.html中使用swipers指令:

  1. <!-- swipers指令start -->
  2. <swipers data="yws"></swipers>
  3. <!-- swipers指令end -->

开发过程中的遇到的问题:
1、点击除“要闻”外的栏目,再点击“要闻”,多连发滚动不起作用;
2、向下滚动要闻列表后再向上滚动时多连发滚动不起作用(原因:向上滚动时重新请求了接口)
解决方法:将此处功能封装成一个指令,使用指令解决了以上2个问题

此处滑动到最后会出现一个空白位

解决方法:

  1. spaceBetween: 10

去掉此属性,循环项之间的距离使用css控制即可。

angularjs中使用swiper时不起作用,最后出现空白位的更多相关文章

  1. AngularJS 中<a> 超链接标签不起作用?

    开始时遇到个问题,单页应用<a>元素链接点击就是不跳转页面,使用超链接标签<a href='group'>click</a> 不起作用. 解决方法: 如果你不巧配置 ...

  2. angularjs中ajax请求时传递参数的方法

    method1方法使用的是params参数,该用法会把参数直接附加到url中 method2方法使用的是data参数,该参数会把页面参数类型从默认的multipart/form-data改为appli ...

  3. django中写form表单时csrf_token的作用

    之前在学习django的时候,在template中写form时,出现错误.百度,google后要加{% csrf_token %}才可以,之前一直也没研究,只是知道要加个这个东西,具体是什么也不明白. ...

  4. AngularJS中get请求URL出现跨域问题

    今天早上帮助同学看了一个AngularJS的问题,主要是请求中出现了跨域访问,请求被阻止. 下面是她给我的代码: <html lang="en" ng-app="m ...

  5. AngularJS 中的Promise --- $q服务详解

    先说说什么是Promise,什么是$q吧.Promise是一种异步处理模式,有很多的实现方式,比如著名的Kris Kwal's Q还有JQuery的Deffered. 什么是Promise 以前了解过 ...

  6. angularJS中directive与controller之间的通信

    当我们在angularJS中自定义了directive之后需要和controller进行通讯的时候,是怎么样进行通讯呢? 这里介绍3种angular自定义directive与controller通信的 ...

  7. angularJS中的Promise对象($q)的深入理解

    原文链接:a better way to learn AngularJS - promises AngularJS通过内置的$q服务提供Promise编程模式.通过将异步函数注册到promise对象, ...

  8. AngularJS中的Provider们:Service和Factory等的区别

    引言 看了很多文章可能还是不太说得出AngularJS中的几个创建供应商(provider)的方法(factory(),service(),provider())到底有啥区别,啥时候该用啥,之前一直傻 ...

  9. AngularJS 中的 Promise 和 设计模式(转)

    原文地址:http://my.oschina.net/ilivebox/blog/293771 目录[-] Promise 简单例子 链式 Promise Parallel Promises And ...

随机推荐

  1. ICPC 2018 焦作区域赛

    // 2019.10.7 练习赛 // 赛题来源:2018 ICPC 焦作区域赛 // CF链接:http://codeforces.com/gym/102028 A Xu Xiake in Hena ...

  2. IPv6 三个访问本地地址的小Tips

    最近发现家里宽带支持IPv6了,这里分享三个利用IPv6访问本地地址(内网地址)的方法. 通常来说,我们用localhost来代表本地地址127.0.0.1.其实在IPv6中有他自己的表示方法ip6- ...

  3. 浅析AIDL的使用和工作原理

    AIDL是一种接口定义语言,用于生成可在Android设备上两个进程之间进行进程间通信(IPC)的代码. AIDL的使用 新建一个aidl文件,定义进程间通信的接口 // IStudentManage ...

  4. 测试Tensorflow-GPU的例子

    import tensorflow as tf # import os # os.environ['TF_CPP_MIN_LOG_LEVEL']='2' a = tf.placeholder(tf.i ...

  5. Neo4j和Elasticsearch

    Neo4j和Elasticsearch Neo4j和Elasticsearch是一种让人眼前一亮的组合,为什么需要把搜索和图表结合起来呢?它们是如何使用的呢? 在无处不在的互联网搜索引擎的推动下,全文 ...

  6. 使用雪碧图Css Sprite精灵 | 加速网页响应速度

    什么是CSS Sprite精灵? 是用于前端的一种图片应用技术,通常情况,我们的开发的网页或许有很多张图片,假如在一个页面上有50多张小图片,这意味着浏览器要逐个下载50张图片.Css Sprite它 ...

  7. Linux(Centos7)安装ngnix服务器

    Ngnix服务器是一款优秀的静态页服务器软件和反向代理服务器软件 目前,centos安装ngnix可以yum安装也可以下载安装,我们为了扩展方便,选择下载安装.yum一键安装没什么好说的. 一.安装编 ...

  8. .net 接受请求过来的流

    //接收POST过来的数据 System.IO.Stream s = Request.InputStream; int count = 0; byte[] buffer = new byte[1024 ...

  9. JQUERY(入口函数 选择器)

    入口函数   $(document).ready(function(){ });可以简写为$(function(){}) 选择器 基本选择器 元素选择器   $("p") 所有 & ...

  10. day15 python-03 列表,元组,字典

    Python之路,Day3 = Python基础3 注: extend: 拼接 enumerate:打印序号,返回两个值 模块的简单使用 sys模块 #!/usr/bin/env python #这句 ...