移動端Ionic App 資訊上下迴圈滾動的實現代碼(跑馬燈效果)，ionic跑馬燈

移動端Ionic App 資訊上下迴圈滾動的實現代碼(跑馬燈效果)，ionic跑馬燈

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

總結

以上所述是小編給大家介紹的移動端Ionic App 資訊上下迴圈滾動的實現代碼，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！