var myScroll, pullUpEl, pullUpOffset;

function pullUpAction () {
    setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!
        var el, li, i;
        el = document.getElementById('thelist');
        for (i=0; i<2; i++) {
            li = document.createElement('li');
            li.innerHTML =
                '<div class="bill-head">'
                +'<span>订单号：<em>98000000000000000</em></span>'
                +'<a href="javascript:;">查看详情 ></a>'
                +'</div>'
                +'<div class="bill-text">'
                +'<p class="an">'
                +'<span>安保无忧全年意外险计划四安保无忧全年意外险计划四安保无忧全年意外险计划四</span>'
                +'</p>'
                +'<p class="jie">'
                +'<span>已结算</span>'
                +'<i>来源: <em>本级名称</em></i>'
                +'</p>'
                +'<p class="bill-time">支付时间：2018-04-28 16:16:16</p>'
                +'</div>'
                +'<div class="bill-footer">'
                +'<div class="footer-cont">'
                +'<p>订单金额：<span>￥5000.00</span></p>'
                +'<p>下级收入：<span>￥500.00</span></p>'
                +'</div>'
                +'<div class="footer-cont">'
                +'<p>订单收入：<span>￥5000.00</span></p>'
                +'<p>净收入：<span>￥500.00</span></p>'
                +'</div>'
                +'</div>';
            el.appendChild(li, el.childNodes[0]);

        }


        myScroll.refresh();		// 数据加载完成后，调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
    }, 1000);	// <-- Simulate network congestion, remove setTimeout from production!
}

/**
 * 初始化iScroll控件
 */
function loaded() {

    pullUpEl = document.getElementById('pullUp');
    pullUpOffset = pullUpEl.offsetHeight;

    myScroll = new iScroll('wrapper', {
        scrollbarClass: 'myScrollbar', /* 重要样式 */
        scrollbars: true,
        mouseWheel: true,//允许滑轮滚动
        useTransition: false, /* 此属性不知用意，本人从true改为false */
        onRefresh: function () {
            if (pullUpEl.className.match('loading')) {
                pullUpEl.className = '';
                pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
            }
        },
        onScrollMove: function () {
            if (this.y < (this.maxScrollY - 55) && !pullUpEl.className.match('flip')) {
                pullUpEl.className = 'flip';
                pullUpEl.querySelector('.pullUpLabel').innerHTML = '松手开始更新...';
                this.maxScrollY = this.maxScrollY;
            } else if (this.y > (this.maxScrollY + 55) && pullUpEl.className.match('flip')) {
                pullUpEl.className = '';
                pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
                this.maxScrollY = pullUpOffset;
            }
        },
        onScrollEnd: function () {
            if (pullUpEl.className.match('flip')) {
                pullUpEl.className = 'loading';
                pullUpEl.querySelector('.pullUpLabel').innerHTML = '正在加载...';
                pullUpAction();	// Execute custom function (ajax call?)
            }
        }
    });

    setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
}

//初始化绑定iScroll控件
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);