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

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(){//必选,刷新函数&
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要实现一个移动端的table表格,并且有上拉加载下拉刷新的功能,你可以使用一些开源的UI框架或者组件库,例如MUI、Vant、Ant Design Mobile等。 以下是一个使用MUI框架实现的示例代码: HTML: ```html <!-- table表格容器 --> <div id="table-container"> <!-- table表格 --> <ul class="mui-table-view mui-table-view-chevron"> <li class="mui-table-view-cell"> <a class="mui-navigate-right">Item 1</a> </li> <<li class="mui-table-view-cell"> <a class="mui-navigate-right">Item 2</a> </li> <li class="mui-table-view-cell"> <a class="mui-navigate-right">Item 3</a> </li> <!-- 省略更多的表格行 --> </ul> <!-- 上拉加载提示 --> <div class="mui-pull-bottom-tips"> <div class="mui-loading"> 加载中... </div> </div> </div> ``` CSS: ```css /* table表格容器样式 */ #table-container { height: 100%; } /* 上拉加载提示样式 */ .mui-pull-bottom-tips { height: 50px; line-height: 50px; text-align: center; font-size: 14px; color: #888; } .mui-pull-bottom-tips .mui-loading { display: inline-block; width: 20px; height: 20px; margin-right: 10px; border-radius: 50%; border: 2px solid #ccc; border-top-color: #07c160; animation: mui-rotate 0.6s linear infinite; } @keyframes mui-rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } } ``` JavaScript: ```javascript // 初始化上拉加载 mui.init({ pullRefresh: { container: '#table-container', up: { contentrefresh: '正在加载...', callback: function() { // 模拟加载数据 setTimeout(function() { // 插入新的表格行 var table = document.querySelector('.mui-table-view'); var li = document.createElement('li'); li.className = 'mui-table-view-cell'; li.innerHTML = '<a class="mui-navigate-right">New Item</a>'; table.appendChild(li); // 结束上拉加载 mui('#table-container').pullRefresh().endPullupToRefresh(false); }, 1000); } } } }); ``` 注意:这只是一个简单的示例代码,实际情况可能需要更复杂的代码来满足需求。另外,上拉加载下拉刷新功能需要与后端API接口配合使用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值