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:虽然解决了,但不明白什么缘由形成了这个问题,哪位同窗若是知道的话请指点下。)