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

最新推荐文章于 2026-05-16 06:25:27 发布

原创

最新推荐文章于 2026-05-16 06:25:27 发布 · 3.1k 阅读

标签

#mui #mui双滚动条 #下拉加载 #类似微信的历史消息加载

收录于

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

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(){//必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
                window.setTimeout(function(){
                    if(total === 0) {
                        getListDataFromNet()