angularjs中使用swiper时不起作用,最后出现空白位

controller.js中定义swipers指令:

var moduleCtrl = angular.module('newscontroller',['infinite-scroll','ngTouch','news.service'])
.directive('swipers',swipers);
swipers.$inject = ['$timeout'];
function swipers($timeout) {return {restrict: "EA",scope: {data:"="},template: '<div class="swiper-container" ng-if="data.dlfList.length>0" id="swiper-container1">'+'<div class="swiper-wrapper">'+'<div class="swiper-slide" ng-repeat="swiperList in data.dlfList">'+'<a ng-href="{{swiperList.isLink}}" ng-if="swiperList.classify==\'zt\'">'+'<div class="img-wrap">'+'<img ng-src="{{swiperList.picture}}" alt="{{swiperList.title}}" class="thumbpic">'+'</div><div class="dl_font_title dl_font_title_swiper" ng-bind="swiperList.title"></div>'+'<div class="source" ng-bind="swiperList.source"></div></a>' + '<a ng-if="swiperList.classify!=\'zt\'" ng-click="newsDetail(swiperList.id,swiperList.classify,swiperList.pubtime)">'+'<div class="img-wrap"><img ng-src="{{swiperList.picture}}" alt="{{swiperList.title}}" class="thumbpic">'+'<div class="numWrap" ng-if="swiperList.classify==\'pic\'">'+'<img class="swiper-numpic" src="http://dw.chinanews.com/chinanews/resource/mnapp/img/num.png">'+'<div class="swiper-num" ng-bind="swiperList.picCount"></div></div>'+'<div class="numWrap" ng-if="swiperList.classify==\'zb\'">'+'<img class="swiper-numpic" src="http://dw.chinanews.com/chinanews/resource/img/live.png"></div>'+'<div class="numWrap" ng-if="swiperList.classify==\'zy\'">'+'<img class="swiper-numpic" src="http://dw.chinanews.com/chinanews/resource/mnapp/img/num.png">'+'<div class="swiper-num">专题</div></div></div>'+'<div class="dl_font_title dl_font_title_swiper" ng-bind="swiperList.title"></div>'+'<div class="source" ng-bind="swiperList.source"></div></a>'+'</div></div></div>',link: function(scope, element, attrs) {
if(scope.$last){//最后一个循环项加载完成后初始化$timeout(
function(){var swiper = new Swiper('.swiper-container', { //轮播图绑定样式名slidesPerView: 'auto',spaceBetween: 10}); },100);
}}}; }

index.html中使用swipers指令:

<!-- swipers指令start --><swipers data="yws"></swipers><!-- swipers指令end -->

 

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

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

解决方法:

spaceBetween: 10

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

转载于:https://www.cnblogs.com/loveamyforever/p/8466968.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/281186.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用Jupyter记事本记录和制作.NET可视化笔记

前言&#xff1a;对于记录笔记的工具特别多&#xff0c;不过对于程序员来说&#xff0c;记录笔记程序代码运行结果演示可以同时存在&#xff0c;无疑会极大增加我们的笔记的可读性和体验感。以前在写python的时候&#xff0c;使用jupyter的体验很好&#xff0c;所以此处做一个基…

火狐上如何使用谷歌翻译插件_将Google翻译功能添加到Firefox

火狐上如何使用谷歌翻译插件Are you looking for a quick no-fuss way to translate webpages? Then you will want to take a good look at the Translate extension for Firefox. 您是否正在寻找一种快速简便的方法来翻译网页&#xff1f; 然后&#xff0c;您将需要很好地了…

Android 4.X 系统加载 so 失败的原因分析

1 so 加载过程 so 加载的过程可以参考小米的系统工程师的文章loadLibrary动态库加载过程分析 2 问题分析 2.1 问题 年前项目里新加了一个 so库&#xff0c;但发现native 方法的找不到的 crash 好多&#xff0c;好些都是报了java.lang.unsatisfiedlinkerror native method not f…

桌面显示激活windows_愚蠢的怪胎技巧:如何在桌面上显示Windows版本

桌面显示激活windowsHave you ever noticed during all the beta releases of Windows, there’s always a Windows version on the desktop in the lower right-hand corner? Here’s how that “feature” is enabled or disabled. 您是否曾经在Windows的所有beta版本中都注…

服务网格:限流保护 (上)

背景限流是服务治理中保护服务的重要手段之一&#xff0c;也是最直接有效的手段&#xff0c;它可以保护服务不被瞬间的大流量冲垮&#xff0c;类似电路中的“保险丝”。在服务上线前&#xff0c;我们都会对服务进行基准测试&#xff0c;来了解可通过的最大“电流”。上面所说的…

博弈论进阶之Anti-SG游戏与SJ定理

前言 在上一节中&#xff0c;我们初步了解了一下SG函数与SG定理。 今天我们来分析一下SG游戏的变式——Anti-SG游戏以及它所对应的SG定理 首先从最基本的Anti-Nim游戏开始 Anti-Nim游戏是这样的 有两个顶尖聪明的人在玩游戏&#xff0c;游戏规则是这样的&#xff1a; 有\(n\)堆…

怎样取消outlook约会_快速提示:在Outlook 2010中设置和取消约会

怎样取消outlook约会Getting everyone in one place at the same time for appointments can be daunting at times. Outlook makes it easy to setup appointments and invite attendees as well, and here we look at doing it in Outlook 2010. 同时让每个人都集中在一个地方…

重视和解决 ABP 分布式事件乱序问题

ABP Framework 5.0 实现了单体应用场景下&#xff0c;收件箱和发件箱的事件严格顺序性。但在微服务或多数据库场景下&#xff0c;由于网络时延和设施效率的限制&#xff0c; 分布式事件将不再是 Linearizability [1] 的&#xff0c;因此必然会存在物理时间上的收件乱序。借用 D…

个人博客建站方案推荐

1.服务器选择 正值双十一来临之际各大服务器提供商又大量的优惠活动&#xff0c;各位要步入个人站长行列的小哥们时机要把握好了&#xff0c;我个人使用过阿里云的服务器&#xff0c;腾讯云的服务器&#xff0c;华为云的服务器。其实&#xff0c;个人感觉就放个博客&#xff0c…

linux系统下nginx安装目录和nginx.conf配置文件目录

linux系统下nginx安装目录和nginx.conf配置文件目录 1、查看nginx安装目录 输入命令 # ps -ef | grep nginx 返回结果包含安装目录 root 2662 1 0 07:12 ? 00:00:00 nginx: master process /usr/sbin/nginx 2、查看nginx.conf配置文件目录 输入命令 # nginx…

android启用hdcp_如何在Android上启用优先收件箱(和设置仅重要通知)

android启用hdcpYesterday Google released an updated Gmail application for Android 2.2 phones that supports the Priority Inbox feature—and more importantly, allows you to change your notifications to only alert you for important email. Let’s take a look. …

.Net CLR GC plan_phase二叉树和Brick_table

楔子Plan_Phase(GC的计划阶段)很早就接触了&#xff0c;但是后面一直没用到&#xff0c;忘记了&#xff0c;此次又用到了&#xff0c;几乎忘光了&#xff0c;费了很大力气理解它&#xff0c;记录下&#xff0c;以免又忘记了。主题计划阶段(plan_phase)主要就两个部分&#xff0…

Vijos p1484 ISBN号码

描述每一本正式出版的图书都有一个ISBN号码与之对应&#xff0c;ISBN码包括9位数字、1位识别码和3位分隔符&#xff0c;其规定格式如“x-xxx-xxxxx-x”&#xff0c;其中符号“-”就是分隔符&#xff08;键盘上的减号&#xff09;&#xff0c;最后一位是识别码&#xff0c;例如0…

scrapy爬虫启示录-小伙子老夫看你血气方刚这本《爬虫秘录》就传给你了

文章来源&#xff1a; IT源点 第一章 误入歧途 每个学习爬虫的人都有一颗爱美的心&#xff0c;俺也是一样的。那么多的美眉图片&#xff0c;不薅下来&#xff0c;没了谁负责。于是夜里孤枕难眠的老男孩开始了他的撸码之旅。从此在学习爬虫&#xff0c;学习Python的道路上越走…

自己设置假期的日历控件_在假期旅行时使用PC娱乐自己

自己设置假期的日历控件Staying connected may be hard no matter what network you are on, and in flight Wi-Fi isn’t pervasive enough to count on. Here are tips and tricks to keep yourself entertained when unplugged and traveling. 无论您使用什么网络&#xff0…

.Net CLR异常和windows C++ 异常调用栈简析

楔子前面一篇研究了下C异常的&#xff0c;这篇来看下&#xff0c;CLR的异常内存模型&#xff0c;实际上都是一个模型&#xff0c;承继自windows异常处理机制。不同的是&#xff0c;有VC编译器(vcruntime.dll&#xff09;接管的部分&#xff0c;被CLR里面的函数ProcessCLRExcept…

Codeforces936C. Lock Puzzle

给个串&#xff0c;只能用操作shift x表示把后面x个字符翻转后放到串的前面。问s串怎么操作能变t串。n<2000&#xff0c;操作次数<6100。 打VP时这转来转去的有点晕。。。 可以想一种逐步构造的方法&#xff0c;即从一个小的完成构造的部分通过一顿操作&#xff0c;在不影…

公共服务领域英文译写规范_公共领域日:对版权和公共领域重要性的思考

公共服务领域英文译写规范The first of the year is Public Domain Day, a day intended to call attention to copyright issues and the public domain. At the Center for the Study of the Public Domain they have an interesting (and sobering) review of works that wo…

Elasticsearch 实战经验总结

Centos7下es 7.7.0安装配置 怎么安装使用elasticsearch-head插件 用logstash同步Mysql数据到ES Springboot使用ES官方推荐方式REST Client整合ES实现关键词高亮 ELK-Elasticsearch&#xff0c;Logstash&#xff0c;kibana搭建基于日志文件的日志分析系统 设置elasticsearc…

.Net 7 的 AOT 和 CLR有什么区别?

楔子&#xff1a;AOT和 CLR的区别是什么呢&#xff1f;大部分人肯定会说&#xff0c;一个编译成本地机器码&#xff08;Native Code&#xff09;&#xff0c;一个是JIT即时编译的结果。这么说&#xff0c;其实也对&#xff0c;但是不具体。具体应该怎么看呢&#xff1f;AOTAOT实…