Lspring
Lspring
  • 发布:2018-05-09 11:46
  • 更新:2019-12-31 11:51
  • 阅读:4167

mui上拉加载未到底部也触发

分类:MUI

项目中用的左侧选项卡,右侧是商品,底部是放了上拉加载功能:

这是前端代码:

在IOS上没啥问题,在android上如果右侧快速上拉,底部能显示上拉加载的。如果慢慢的上拉,则会上拉一段距离后主动触发上拉记载,也就是没到底部就已经触发了。
各位大神有遇到过这个问题吗?有什么好的解决办法?
mui上拉加载要是有到达底部后,触发一定的距离后触发上拉加载就好了

2018-05-09 11:46 负责人:无 分享
已邀请:
l***@icloud.com

l***@icloud.com

我也遇到同样的问题

1***@qq.com

1***@qq.com - 小渣渣一枚

我也遇到了。。。

小黑的眼

小黑的眼

你们怎么解决的呢

8***@qq.com

8***@qq.com

你好,可以共享一下源码吗?我想出现类似的问题

c***@foxmail.com
  • Lspring (作者)

    找不到解决方法,我现在是直接在底部加一个加载按钮,让用户去点击刷新

    2018-11-06 11:20

  • c***@foxmail.com

    我是监听上划时,监听可视高度加滚动距离是否大于或等于scrollHight,如果是就刷新

    2018-12-29 09:57

l***@163.com

l***@163.com

有解决的方法吗,大佬们

  • Lspring (作者)

    换成按钮了,点击来加载

    2018-12-04 19:10

  • l***@163.com

    回复 Lspring:我那个莫名其妙的就好了。没有那个bug了

    2018-12-19 11:38

  • Lspring (作者)

    回复 l***@163.com:后面的我可能就没试了,可能官方修复了这个BUG

    2018-12-29 10:51

6***@qq.com

6***@qq.com

请问有解决方案么?

一枚丶

一枚丶

我的也是不小心拉到一点也触发,这什么监听,情况!

9***@qq.com

9***@qq.com

https://blog.csdn.net/chenwuai/article/details/80695501

倾盖若新

倾盖若新

我也出现了这个问题,说一下我的解决方案,希望对后面踩坑的小伙伴有帮助。
问题:内容超出屏幕高度时,上拉未加载未显示内容,直接触发上拉刷新事件
代码
<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);
问题解决.

该问题目前已经被锁定, 无法添加新回复