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.pswp.cn/news/281186.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/281186.shtml
英文地址,請注明出處:http://en.pswp.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實…