跳到主要內容

Angularjs Infinite Scrolling

無限滾動卷軸(infinite scrolling),又稱瀑布流,是現今流行的介面設計模式,許多著名的社群網站如:Facebook、Pinterest都是以這樣的瀏覽方式為主,這種互動方式讓使用者在瀏覽頁面時不用再像以前一樣不斷的點擊上一頁、下一頁,雖然這種介面設計模式看似完美,但仍有許多的知名網站如Google、Flicker採用分頁的介面設計模式,這是因為瀑布流這種模式較適用於非常即時的資料呈現需求狀況下,如使用者第一個想看到的應該是最新發生的消息、關注的動態,之後才慢慢看到尚未看到的動態,因此才會有許多的社群網站採取這種設計模式,而在此也分享infinite scrolling設計的優缺點,以及如何使用Angularjs來實作。

 一、優點

     1.因應不同裝置:一般桌上型電腦或筆記型的螢幕都較寬,故常採取並排的方式來顯示網站資訊,但隨著行動裝置的普及,與以往螢幕大小已有所不同,如直立式手機寬度就與一般螢幕相差甚遠,因此若採取infinite scrolling這種設計模式將瀏覽方式轉變為垂直的排列,搭配向下捲動的行為,可以讓使用者閱覽延續。
     2.預先載入時間短:若網頁需要呈現資訊有上萬筆,那麼在初始載入時勢必會花上大量時間來等待,因此只需要呈現少許資訊,待閱覽完這些資訊時再載入更多資訊。
     3.資源的節省:通常使用者並不會想一次看完所有資訊,故讓使用者想看實在產生多一點再去要求資源也較不會造成不必要的浪費。

二、缺點

     1.失去最佳的搜尋:常常在捲動時會看到較佳的一個搜尋結果,但當新的消息加入時會讓我們以為最佳的搜尋結果在下面,但未必如此,往下卷之後就較難回到我們剛剛所認定的最佳結果。
     2.跳回原頁面時,又需從最上方開始瀏覽。
     3.多餘的瀏覽:不斷的出現資訊,讓使用者不斷的瀏覽,就像一篇文章沒有中斷點。


三、介面設計一定有好跟壞,就取決於用戶需求,並分析缺點後做一些補強的措施,如結合各種介面設計的特點等。


四、接著則說明如何使用Angularjs來達成infinite scrolling的效果,設計概念主要是運用directive來創造<list-infinitescroll>的標籤,也就是設計一個listview的控件,只是這個控件可以讓開發人員傳入顯示的資料來源、標題、以及當捲軸捲到底時所想要做的事,對<list-infinitescroll>來說主要的任務是在每次捲動時判斷是否已經捲到底,若是,則進行使用控件人員所委派進來的動作,如載入下一批資料等,而這樣也達成的分離效果,開發控件的人只需要所有需要觸發的事件以參數當接口,當某些事件觸發時來執行使用控件所要執行的動作,而對使用控件的人來說他只需要將"當某些事件被觸發時所想做的事"傳入控件即可。


五、首先我們先來設計這個自訂標籤,作為一個獨立的模組,infinitescroll.js,而whenScrollBottom標籤主要是當捲動時來判斷是否已經到捲到底,若是則動作,inject標籤則是要能顯示repeat中item的值可參考:http://selfdesigning.blogspot.tw/2014/10/angularjs-ng-transcludeng-repeat.html

(function () {
    angular.module('infinitescrollModule', [])
        .directive('listInfinitescroll', function () {
            return{
                restrict: 'E',
                scope: {
                    listTitle: '@',
                    datasource: '=',
                    doLoadMore: '=',
                },
                transclude: 'true',
                templateUrl: 'listview.html',
                link: function (scope, element, attrs) {
                   scope.divWidth = document.getElementById('myDiv').offsetWidth -60
                    scope.loadMore = function () {
                        if (scope.doLoadMore)  scope.doLoadMore()
                    }
                }

            }
        })
        .directive('inject', function () {
            return{
                restrict: 'A',
                link: function (scope, element, attrs, ctrl, transcludeFn) {
                    if (!transcludeFn) return;
                    transcludeFn(scope, function (clone) {
                        element.empty();
                        element.append(clone);
                    });
                }
            }
        })
        .directive('whenScrollBottom', function () {
            return function (scope, elem, attr) {
                var scrollBar = elem[0]
                elem.bind('scroll', function () {
                    if (scrollBar.scrollTop + scrollBar.offsetHeight >= scrollBar.scrollHeight) {
                        scope.$apply(attr.whenScrollBottom);
                    }
                })
            }
        })
})()

六、設計樣板介面listview.html作為list的顯示

<div class="panel panel-success">
    <div class="panel-heading"><h3>{{listTitle}}</h3> <div class="list-group-item" align="center" ng-show="isBusy"><span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>Loading...</div></div>
    <div id="myDiv" style="overflow: auto;max-height: 600px" when-scroll-bottom="loadMore()">
        <li class="list-group-item" ng-repeat="item in datasource">
            <div ng-transclude inject></div>
        </li>
    </div>
</div>

七、設計使用控件端所需要做的事app.js。

(function () {
    angular.module('appModule', ['infinitescrollModule'])
        .controller('appController', function ($scope) {
            $scope.oneceToShow = 20
            $scope.datasource = []
            $scope.init = function () {//第一次加入0~20
                $scope.sourcePush(0, $scope.oneceToShow)
            }
            $scope.doLoadMore = function () {//分批載入
                var start = $scope.datasource.length
                var end = start + $scope.oneceToShow
                $scope.sourcePush(start, end)
            }
            $scope.sourcePush = function (start, end) {
                for (var i = start; i < end; i++) {
                    $scope.datasource.push({
                        name: 'a',
                        id: i
                    })
                }
            }
            $scope.init()
        })
})()

八、使用控件端的樣板,其中傳入datasource、title、跟需要載入更多的function委派給控件去做。

<html ng-app="appModule">

  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="//code.angularjs.org/1.3.0/angular.js"></script>
   
    <script src="app.js"></script>
    <script src="infinitescroll.js"></script>
    <link rel="stylesheet" href="style.css" >
   
  </head>

  <body ng-controller="appController">
    <div style="margin: auto;">
    <list-infinitescroll datasource="datasource"
                         list-title="{{'Infinite Scroll Demo'}}"
                         do-load-more="doLoadMore"
            >
        <div>
            <img ng-src="http://placehold.it/{{divWidth}}x100&text={{item.name + item.id}}" >
        </div>
    </list-infinitescroll>
</div>
  </body>

</html>

留言

這個網誌中的熱門文章

java西元民國轉換_各種不同格式

C#資料庫操作(新增、修改、刪除、查詢)

【Excel好好玩】 自己的資產自己管!善用Google Sheet來幫我們評估貸款

這次介紹的主題是關於Excel的貸款還款計畫試算,我們人生中總會遇到需要大筆金額的花費,但當資金不夠時就得進行貸款,而貸款之前如果我們能夠審慎評估,並分析自己的還款能力之後在進行凍作,相信風險會小很多,因此就自己動動手來使用Google Sheet進行試算吧! 基本資料 ● 貸款總額: 1000000 ● 貸款期數: 84月 ● 年利率: 2.11% ● 月利率: 0.18% P.S 月利率 = 年利率 / 12 重要函式 PMT : 這是Google Sheet內建的重要年金計算公式,我們可以善用這個公式來計算固定利率及期數的固定攤還本息。因為PMT函式計算出的結果為負數,所以前面加上-號轉成正數。 動手做 首先我們在Excel表上列出我們的基本資料 圖片來源 其中月利率的部分就使用公式「=B4/12」 接著我們填上第一列的期數跟餘額 圖片來源 =B2 =B3 使用關鍵PMT函數來計算本息的部分 因為PMT函式計算出的結果為負數,所以前面加上-號轉成正數。 -PMT(貸款利率(月利率), 貸款期數, 貸款總額) =-PMT($B$5,$B$3,$B$2) 圖片來源 計算利息 利息 = 貸款餘額 x 月利率 =B8*$B$5 圖片來源 計算本金 本金 = 本息 - 利息 =C8-D8 圖片來源 製作第二列餘額的部分 餘額的部分 = 上一期的餘額 - 上一期的本金 圖片來源 接著拖曳該兩列往下拉,即可查看每一期的利息與本金 圖片來源 結語 雖然市面上已經有很多貸款銀行都提供了試算功能,但如果我們想要進一步管理自己的資產時,就需要將每一期的金額給計算出來,因此才會將公式運用在Excel表,讓我們的資產管理表能夠結合負債,進一步評估我們理財行動的下一步,希望這樣的經驗可以幫助到正在理財道路上打拼的夥伴,讓我們透過有效的管理,幫助荷包長大吧! 喜歡撰寫文章的你,不妨來了解一下: Web3.0時代下為創作者、閱讀者打造的專屬共贏平台 — 為什麼要加入? 歡迎加入一起練習寫作,賺取知識,累積財富!