利用mui做类似微信聊天历史记录的加载（下拉加载更多，加载之后页面回到加载之前的位置，以及解决mui双滚动条的问题）

最新推荐文章于 2024-08-01 18:20:32 发布

Ustupid741

最新推荐文章于 2024-08-01 18:20:32 发布

阅读量2.9k

点赞数

分类专栏： mui 微信公众号文章标签： mui mui双滚动条下拉加载类似微信的历史消息加载

本文链接：https://blog.csdn.net/Ustupid741/article/details/84792569

版权

本文介绍如何利用mui实现类似微信聊天历史记录的下拉加载功能，并解决加载过程中出现的双滚动条问题。关键在于设置data-scroll属性为'1'，避免重新定义滚动操作。

摘要由CSDN通过智能技术生成

html：
<div class="tmsg-content">
    <div id="t-msg" class=" mui-scroll-wrapper" data-scroll = "1">
        <div class="mui-scroll">
            <ul id='msgList' class="mui-scroll mui-table-view msg-list content-padding mui-table-view-chevron">
            </ul>
        </div>
    </div>
</div>

js：

function pullRefresh(){
    mui("#pullRefresh").pullRefresh({
        indicators: true, //是否显示滚动条
        deceleration:deceleration, //阻尼系数,系数越小滑动越灵敏
        bounce: true, //是否启用回弹
        down:{
            auto: true,
            height:50,
            contentrefresh : "",//可选，正在加载状态时，上拉加载控件上显示的标题内容
            contentnomore:'',//可选，请求完毕若没有更多数据时显示的提醒内容；
            callback:function(){//必选，刷新函数&