IScroll整體上用起來比較簡單,可是若是用很差的可能會產生底部一點滾動不上去的問題。css
環境:weui+iscroll5ajax
總體佈局及id以下app
searchbar
wrapper
divscroll佈局
window.onload = function () { FillList(); } function FillList() { try {if (myScroll == undefined || myScroll == null) loadedsroll(); else myScroll.refresh(); } catch (e) { } } var myScroll = null; var wrapperheight = 0; var isMore = false; //是否可刷新標記 var pageIndex = 1; var pageSize = 10; //加載Iscroll function loadedsroll() { setTimeout(function () { myScroll = new IScroll('#wrapper', { click: true }); myScroll.on('scrollStart', function () { document.activeElement.blur(); }); myScroll.on('scrollEnd', function () { var temp_height = 0; temp_height = $("#wrapper").height(); try { var hwindow = (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight)- $('#searchBar').height(); if (temp_height > hwindow) temp_height = hwindow; } catch (e) { } $("#wrapper").height(temp_height); $("#divscroll").css("min-height", temp_height + 1); if (this.y <= this.maxScrollY) { if (isMore == false) { $("#divscroll").height("");this.refresh(); return; } pageIndex = pageIndex + 1; FillList(); this.refresh() } else { this.refresh() } }); }, 100); }
按上面的寫法通常沒有問題,支持ajax加載,只要把要加載的數據放到FillList中便可,如下內容是關鍵,不注意的話,divscroll內部元素底部會被擋一部分。post
一、以前經過設置divscroll當前高度+一個額外高度解決,但有時加固定高度偏差比較大,滑動到底部會有額外一段空白,用戶體驗很差。測試
二、開發者模式能夠看到是總高度不對,即便設置內部元素margin也不行。ui
三、嘗試使用網上說的加載完畢後refresh無效。this
經過測試研究有兩種解決辦法:spa
一、設置postion:abolute;code
二、設置#divscroll元素的padding-bottom:1px,設爲0不起做用,設置1px便可。
即
#divscroll { position: absolute; width: 100%; }
或者
#divscroll { padding-bottom:1px; }
實際項目中處理先後滾動到最底部時的效果(PS:雖然解決了,但不明白什麼緣由形成了這個問題,哪位同窗若是知道的話請指點下。)