口碑好门户网站开发/百度搜索app免费下载

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控制即可。