在ionic App中遇到一個(gè)文字上下循環(huán)滾動(dòng)的效果實(shí)現(xiàn)，網(wǎng)上查了之后才知道有個(gè)通俗的名字-跑馬燈。

這里借助了jQuery庫(kù)的選擇器和動(dòng)畫函數(shù)，并且把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)       }     };   }); 

滾動(dòng)的高度scrollHeight設(shè)置為40px，三組文字newsLen循環(huán)，每組兩行文字。每隔2000ms，ul列表向上移動(dòng)固定距離，top值為（_scrollHeight + 10）* index 的長(zhǎng)度。

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> 

這里對(duì)文字做了簡(jiǎn)單的處理，字符串超過19，會(huì)以“...”的形式顯示。

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; } 

總結(jié)

以上所述是小編給大家介紹的移動(dòng)端Ionic App 資訊上下循環(huán)滾動(dòng)的實(shí)現(xiàn)代碼，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)錯(cuò)新站長(zhǎng)站網(wǎng)站的支持！