移动端ionic App 资讯上下循环滚动的实现

在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 代码是这样的：

<div class="news-right" ui-sref="newsList">
      <ul slide-scroll>
            <li class="news-box" ng-repeat="row in dataArr">
                <p ng-repeat="item in row">{{item.title.length <= 19 ? item.title : item.title.slice(0, 19) + '...'}}</p>
            </li>
            <li>
                 <p ng-repeat="item1 in dataArr[0]">{{item1.title.length <= 19 ? item1.title : item1.title.slice(0, 19) + '...'}}</p>
            </li>
      </ul>
</div>

这里对文字做了简单的处理，字符串超过19，会以“...”的形式显示。
Css 样式表是这样的：

 .news-right {
    position: absolute;
    height: 40px;
    left: 100px;
    top: 10px;
    right: 0;
    color: rgb(65, 65, 65);
    overflow: hidden;
} 
.news-right ul{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.news-right p {
    padding: 0;
    line-height: 15px;
    text-overflow: ellipsis;
    box-sizing: border-box;
    white-space: nowrap;
    font-size: 13px;
}

效果图就不再贴了