项目中用的左侧选项卡,右侧是商品,底部是放了上拉加载功能:
这是前端代码:
在IOS上没啥问题,在android上如果右侧快速上拉,底部能显示上拉加载的。如果慢慢的上拉,则会上拉一段距离后主动触发上拉记载,也就是没到底部就已经触发了。
各位大神有遇到过这个问题吗?有什么好的解决办法?
mui上拉加载要是有到达底部后,触发一定的距离后触发上拉加载就好了
我也出现了这个问题,说一下我的解决方案,希望对后面踩坑的小伙伴有帮助。
问题:内容超出屏幕高度时,上拉未加载未显示内容,直接触发上拉刷新事件
代码
<div id="pullrefresh">
<div>
<div style="border-bottom:1px solid #ccc">
<div class='mui-table-view-cell'>
<div class='mui-content'>
<span class='textspan '>未学习名单</span>
</div>
</div>
@列表数据@
@Html.Raw(System.Net.WebUtility.HtmlDecode(ViewBag.itemfeedback))
@列表数据@
<div class="order_list">
<ul id="nr" class="mui-table-view mui-table-view-chevron"></ul>
</div>
</div>
</div>
</div>
将#pullrefresh下第一个div设置类mui-scroll后可以正常上拉数据,但会出现滚动条超出屏幕一部分(感觉刚好是一个屏的高度),多刷新几次数据后页面白屏,无内容显示的新问题.
分析:出现内容超出屏幕的原因,应该是MUI框架的bug,mui-scrollbar mui-scrollbar-vertical这个侧边滚动条的高度与滚动区域高度不符导致的。(测试了几个出现这个问题的道友,都是这个原因)。找到原因了就简单了,js重新设置页面滚动区域高度即可。
<div id="pullrefresh">
<div class="mui-scroll">
<div style="border-bottom:1px solid #ccc">
<div class='mui-table-view-cell'>
<div class='mui-content'>
<span class='textspan '>未学习名单</span>
</div>
</div>
@列表数据@
@Html.Raw(System.Net.WebUtility.HtmlDecode(ViewBag.itemfeedback))
@列表数据@
<div class="order_list">
<ul id="nr" class="mui-table-view mui-table-view-chevron"></ul>
</div>
</div>
</div>
</div>
//获取手机高度
var height = document.documentElement.clientHeight || document.body.clientHeight;
console.log(height);
//获取标题栏高度
var nav = $(".mui-bar-nav").height();
//获取导航栏高度
var content = $(".mui-content").height();
//滚动区的高度等于
$("#pullrefresh").height(height - nav - content);
问题解决.