YDUI Touch Docs 返回首页

<section id="J_List">
    <div id="J_ListContent"></div>
</section>

<script>
    /* 通过自定义的方法获取数据【通常是需要定义变量当前第几页page，和每页请求的记录数pageSize】 */
    var page = 1, pageSize = 10;

    $('#J_List').infiniteScroll({
        pageSize: pageSize,
        initLoad: true,
        loadingHtml: '<strong>加载中...</strong>', /* 当然也可以<img src="../img/loading.gif" /> */
        loadListFn: function () {
            var def = $.Deferred();

            /* 通过自定义的方法获取数据 */
            $.ajax({
                url: '/请求数据方法',
                dataType: 'json',
                data: { page: page, pagesize: pageSize },
                success: function (ret) {
                    /* 假设ret.list为后端返回的列表数组 */

                    /* 用你喜欢的方法将获取到的数据拼接成HTML，然后插入；*/
                    /* 建议使用模板引擎，示例使用artTemplate；https://github.com/aui/artTemplate */
                    var html = ret.list + '将数据拼接成html';
                    $('#J_ListContent').append(html);

                    /* 获取数据，并插入页面后，调用resole，并传入当前获取的记录列表集合 */
                    def.resolve(ret.list);

                    /* 页码自增1 */
                    ++page;
                }
            });

            return def.promise();
        }
    });
</script>

<section id="J_List">
    <div id="J_ListContent"></div>
</section>

<script>
    var page = 1, pageSize = 10;

    $('#J_List').infiniteScroll({
        pageSize: pageSize,
        initLoad: true,
        backposition: true,
        jumpLink: '.J_Link',
        loadListFn: function () {
            var def = $.Deferred();

            $.ajax({
                url: '/请求数据方法',
                dataType: 'json',
                data: { page: page, pagesize: pageSize },
                success: function (ret) {
                    var html = ret.list + '将数据拼接成html';
                    /* 特别注意：拼接后的HTML每条数据应包含.J_Link和当前的页面标记data-page，例： */
                    /* <a href="跳转链接" class="J_Link" data-page="' + page + '">内容内容内容</a> */
                    $('#J_ListContent').append(html);

                    def.resolve(ret.list);

                    ++page;
                }
            });

            return def.promise();
        },
        /**
         * 当前从详情页返回列表页时调用此方法
         * @param listData 该次所需加载的数据集合
         * @param retPage 该次加载的页码
         */
        loadStorageListFn: function (listData, retPage) {
            var def = $.Deferred();

            page = retPage;

            var html = '';
            listData.forEach(function (val) {
                html += (val.list + '将数据拼接成html，格式同loadListFn方法一致');
            });
            $('#J_ListContent').append(html);

            def.resolve();
            return def.promise();
        }
    });
</script>