這篇文章給大家分享的是有關(guān)如何實現(xiàn)移動端Ionic App資訊上下循環(huán)滾動效果的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

站在用戶的角度思考問題，與客戶深入溝通，找到內(nèi)蒙古網(wǎng)站設(shè)計與內(nèi)蒙古網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：成都做網(wǎng)站、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、域名申請、虛擬主機、企業(yè)郵箱。業(yè)務(wù)覆蓋內(nèi)蒙古地區(qū)。

這里借助了jQuery庫的選擇器和動畫函數(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) 
      } 
    }; 
  });

滾動的高度scrollHeight設(shè)置為40px，三組文字newsLen循環(huán)，每組兩行文字。每隔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) + '...'}}