鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ 為什么iscroll在手機(jī)里無法滑動呢?在pc需要滑動一兩次才觸動才會顯示效果?

為什么iscroll在手機(jī)里無法滑動呢?在pc需要滑動一兩次才觸動才會顯示效果?

function pullDownAction () {
    location.reload();
    myScroll.refresh();            
}

function pullUpAction () {
        pullNumber++;
        experimentList.param.pageNum=pullNumber;
        getExperimentList();    
        myScroll.refresh();        // Remember to refresh when contents are loaded (ie: on ajax completion)
        // <-- Simulate network congestion, remove setTimeout from production!
}

function loaded() {
    pullDownEl = document.getElementById('pullDown');
    pullDownOffset = pullDownEl.offsetHeight;
    pullUpEl = document.getElementById('pullUp');    
    pullUpOffset = pullUpEl.offsetHeight;
        myScroll = new iScroll('wrapper', {
        useTransition: true,
        topOffset: pullDownOffset,
        onRefresh: function () {
            if (pullDownEl.className.match('loading')) {
                pullDownEl.className = '';
                pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
            } else if (pullUpEl.className.match('loading')) {
                pullUpEl.className = '';
                pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
            }
        },
        onScrollMove: function () {
            if (this.y > 5 && !pullDownEl.className.match('flip')) {
                pullDownEl.className = 'flip';
                pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
                this.minScrollY = 0;
            } else if (this.y < 5 && pullDownEl.className.match('flip')) {
                pullDownEl.className = '';
                pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
                this.minScrollY = -pullDownOffset;
            } else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
                pullUpEl.className = 'flip';
                pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Release to refresh...';
                this.maxScrollY = this.maxScrollY;
            } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
                pullUpEl.className = '';
                pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
                this.maxScrollY = pullUpOffset;
            }
        },
        onScrollEnd: function () {
            if (pullDownEl.className.match('flip')) {
                pullDownEl.className = 'loading';
                pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';                
                pullDownAction();    
            } else if (pullUpEl.className.match('flip')) {
                pullUpEl.className = 'loading';
                pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...';                
                pullUpAction();    
            }
        }
    });
    setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 100); }, false);

這段代碼是仿照demo做的,我是要從后臺一次取出五個(gè)表格數(shù)據(jù),然后填充進(jìn)來,上面是js文件的,下面是html

<div id="wrapper">
        <div id="scroller">
            <div id="pullDown">
                <span class="pullDownLabel">Pull down to refresh...</span>
            </div>
            <div id="thelist">
                 <!--這邊是我插入表格的地方-->
            </div>
            <div id="pullUp">
                <span class="pullUpLabel">Pull up to refresh...</span>
            </div>
        </div>
    </div>

很奇怪,為什么初次加載這個(gè)頁面的時(shí)候沒有滾動條,要鼠標(biāo)劃幾下或者拉幾下才會出現(xiàn)滾動條呢?而且最重要的是他在手機(jī)上滑動不了當(dāng)你手機(jī)頁面刷新的時(shí)候,你才能滑動,而且部分被遮擋住了,刷新完畢又動不了,頁面又僵硬住了 急求解答,謝謝!

回答
編輯回答
呆萌傻

感覺配置里少參數(shù)啊,兩個(gè)use~參數(shù)默認(rèn)都是true所以不用寫,而滾動條
不管是scrollbars還是fadeScrollbars好像都沒看到?有遮擋的情況不知道是不是布局的問題……建議還是去看下文檔吧,中文的可以去看極客學(xué)院那版的。

2017年5月8日 12:57