今天在使用iscroll4 做一个简单触屏滚动demo,发现上下拖动的时候总是会回弹,不能看到下面的内容.这个问题苦恼了很久,终于解决,下来就分享一下:
我的需求是这样的:
1.获取json数据append到div中去:
<div id="resultContent" class="content resultContent" style="height:280px; overflow: hidden">
<div id="showResult" class="showResult" >
</div>
</div>
<script type="text/javascript">
$("#showResult").children().remove();
var htmlContent=""; //resultSet是已经获取的数据.现在要动态添加到id为showResult的Div中
$.each(resultSet, function (index, items) {
htmlContent += '<div class="questionDiv">' +
'<table width="100%"><tr>' +
'<td width="30" style=" vertical-align:top; padding-top:9px;"><img src="data:images/selectPro/yellowPoint.png"/></td> ' +
'<td>' + items.value.question + '</td></tr>' +
'<tr><td colspan="2" style=" color:red;padding-left:7%; font-size:18px;">' + items.value.solution + '</td></tr>' +
'</table>' +
'</div>';
});
$("#showResult").append(htmlContent);
</script>
2,使该id为#showResult的div可以触屏滚动,所以我引入了iscroll4 :
<script type="text/javascript">
setTimeout(function () {
clearInterval(intervalTime);
myScroll = new iScroll('resultContent');
}, 100)
</script>
问题来了:
我这里动态添加到div中的内容不管怎么都不被iscroll所渲染,拖动效果就像橡皮筋一样,永远看不到下面隐藏的内容,如下图所示:
这个问题就是因为,你这个动态数据还没有append完成.该showResult 还没有加载完成,就开始 new iScroll("XXXX")了,这样就不行了,
解决方法:
关键点:找到这个动态添加的层什么时候加载完成,这个时间点要拿准~~~~
我的解决方法:
<script type="text/javascript">
/**
* 初始化显示结果层的高度,iScroll渲染
*/
var initScroll = function () {
intervalTime = setInterval(function () {
var resultContentH = $("#showResult").height();
if (resultContentH > 0) { //判断数据加载完成的条件
console.log("此时showResult的高度是:" + resultContentH);
$("#showResult").height(resultContentH)
setTimeout(function () {
clearInterval(intervalTime);
myScroll = new iScroll('resultContent');
}, 100)
}
}, 10);
}
</script>
我这里就用它的高度来判断是否加载完成,然后重新给定高度.这样以后再new iScroll("XXXX").就没有问题了啦~~~~