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">專(zhuān)題</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){//最后一個(gè)循環(huán)項(xiàng)加載完成后初始化$timeout(function(){var swiper = new Swiper('.swiper-container', { //輪播圖綁定樣式名slidesPerView: 'auto',spaceBetween: 10}); },100);
}}}; }

index.html中使用swipers指令：

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

?

開(kāi)發(fā)過(guò)程中的遇到的問(wèn)題：
1、點(diǎn)擊除“要聞”外的欄目，再點(diǎn)擊“要聞”，多連發(fā)滾動(dòng)不起作用；
2、向下滾動(dòng)要聞列表后再向上滾動(dòng)時(shí)多連發(fā)滾動(dòng)不起作用（原因：向上滾動(dòng)時(shí)重新請(qǐng)求了接口）
解決方法：將此處功能封裝成一個(gè)指令，使用指令解決了以上2個(gè)問(wèn)題

?此處滑動(dòng)到最后會(huì)出現(xiàn)一個(gè)空白位

解決方法：

spaceBetween: 10

去掉此屬性，循環(huán)項(xiàng)之間的距離使用css控制即可。

轉(zhuǎn)載于:https://www.cnblogs.com/loveamyforever/p/8466968.html

總結(jié)

以上是生活随笔為你收集整理的angularjs中使用swiper时不起作用，最后出现空白位的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。