如何实现移动端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) + '...'}}