如何实现移动端IonicApp资讯上下循环滚动效果-创新互联

这篇文章给大家分享的是有关如何实现移动端Ionic App资讯上下循环滚动效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

这里借助了jQuery库的选择器和动画函数，并且把jquery的操作封装到指令里。先看指令代码：

angular.module('starter') 
  .directive('slideScroll', function ($window, $timeout) { 
    return { 
      restrict: 'AE', 
      link: function (scope, element, attr) { 
        var _scrollHeight = 40; 
        var _newsLen = 3; 
        var index = 0; 
        setInterval(function () { 
          index += 1; 
          if (index > _newsLen) { 
            index = 0; 
            $(".news-right ul").css({ 
              top: 0 
            }) 
          } else { 
            $(".news-right ul").animate({ 
              top: -_scrollHeight * index - 10 * index 
            }, 500); 
          } 
        }, 2000) 
      } 
    }; 
  });

滚动的高度scrollHeight设置为40px，三组文字newsLen循环，每组两行文字。每隔2000ms，ul列表向上移动固定距离，top值为（_scrollHeight + 10）* index 的长度。

Html 代码是这样的：

 
    
       
        {{item.title.length <= 19 ? item.title : item.title.slice(0, 19) + '...'}}
 
       
      
 
         {{item1.title.length <= 19 ? item1.title : item1.title.slice(0, 19) + '...'}}