MUI의 pullRefresh 컴포넌트를 활용하면 모바일 웹 앱에서 상단 당기기 새로고침과 하단 끝까지 스크롤 시 추가 데이터를 로드하는 무한 스크롤 기능을 구현할 수 있다. 이 글에서는 하단 스크롤 시 서버에서 페이지 단위로 데이터를 가져와 화면에 렌더링하는 방법을 다룬다.

1. 필수 리소스 로드

MUI의 CSS와 JavaScript 파일, 그리고 데이터 조작을 위한 jQuery를 문서에 포함시킨다.

<link rel="stylesheet" href="static/css/mui.css" />
<script src="static/js/jquery-3.2.0.js"></script>
<script src="static/js/mui.min.js"></script>

2. 스크롤 컨테이너 마크업

pullRefresh가 동작하려면 mui-scroll-wrapper와 mui-scroll 클래스를 가진 중첩 구조가 필요하다. 내부에 리스트를 동적으로 채워 넣을 영역을 배치한다.

<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
    <div class="mui-scroll">
        <ul class="item-list" id="dataList"></ul>
    </div>
</div>

3. 데이터 요청 및 무한 스크롤 초기화

즉시 실행 함수 내에서 페이지 번호를 관리하고, AJAX로 서버에 페이지별 데이터를 요청한다. 응답받은 데이터를 HTML 문자열로 조합하여 리스트에 추가 렌더링한다.

(function() {
    var totalPage = 0;
    var pageNum = 1;

    function fetchPageData() {
        var markup = "";
        $.ajax({
            url: "http://www.example.com/api/orders/list?page=" + pageNum,
            type: "GET",
            dataType: "json",
            timeout: 10000,
            success: function(response) {
                totalPage = response.data.last_page;
                var items = response.data.data;

                $.each(items, function(idx, item) {
                    markup += '<li class="list-row" data-href="/detail?id=' + item.id + '">'
                        + '<div class="row-header">'
                        +     '<span class="order-id">No. ' + item.order_no + '</span>'
                        +     '<span class="order-time">' + item.created_at + '</span>'
                        + '</div>'
                        + '<div class="row-body">'
                        +     '<div class="thumb-box"><img src="' + item.image_url + '" /></div>'
                        +     '<div class="info-box">'
                        +         '<p class="info-title">' + item.goods_name + '</p>'
                        +         '<p class="info-sub">' + item.machine_name + ' (' + item.machine_no + ')</p>'
                        +         '<p class="info-status">상태: <em class="status-active">' + item.order_status + '</em></p>'
                        +     '</div>'
                        +     '<div class="price-box">' + item.amount + '원</div>'
                        + '</div>'
                        + '</li>';
                });

                $("#dataList").append(markup);
            },
            error: function() {
                console.log("데이터 요청 실패");
            }
        });
    }

    mui.init({
        pullRefresh: {
            container: "#refreshContainer",
            up: {
                height: 50,
                auto: true,
                contentrefresh: "불러오는 중...",
                contentnomore: "더 이상 데이터가 없습니다",
                callback: onPullUp
            }
        }
    });

    function onPullUp() {
        setTimeout(function() {
            fetchPageData();
            pageNum++;
            mui("#refreshContainer").pullRefresh().endPullupToRefresh(pageNum > totalPage);
        }, 1500);
    }
})();

4. 탭 이벤트 처리

MUI의 pullRefresh 환경에서는 일반적인 onclick이나 <a> 태그의 기본 동작이 차단될 수 있다. 따라서 MUI에서 제공하는 tap 이벤트를 위임 방식으로 바인딩하여 페이지 이동을 처리해야 한다.

$(function() {
    $("#refreshContainer").on("tap", ".list-row", function(e) {
        var targetUrl = $(this).attr("data-href");
        if (targetUrl) {
            window.location.href = targetUrl;
        }
    });
});

각 리스트 행에 data-href 속성으로 이동할 경로를 저장해두면, tap 이벤트 발생 시 해당 값을 읽어 원하는 상세 페이지로 이동할 수 있다.