DDR爱好者之家

mui上拉加载更多下拉刷新数据的封装过程
站长资源 2025/1/12 佚名
38 1538
DDR爱好者之家 Design By 杰米

辗转用mui做了两个项目，空下来把mui上拉加载更多，下拉刷新数据做了一个简单的封装，希望可以帮助到需要的朋友

demo项目的结构

mui上拉加载更多下拉刷新数据的封装过程

直接贴代码了

index.html

mui上拉刷新下拉加载都这里了，两个方法搞定

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8"> 
 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 <title>mui上拉刷新下拉加载demo--封装</title>
 <script src="/UploadFiles/2021-04-02/mui.min.js">mui上拉加载更多下拉刷新数据的封装过程mui上拉加载更多下拉刷新数据的封装过程mui上拉加载更多下拉刷新数据的封装过程


PS：下面给大家分享一段示例代码：MUI 做上拉下拉加载更多数据小记


html代码





<div id="pullrefresh" class="mui-content mui-scroll-wrapper"> 
    <div id="mui-scroll" class="mui-scroll"> 
      <ul id="refresh-ul" class="mui-table-view"> 
        <!-- 内容 --> 
      </ul> 
    </div> 
  </div> 
<script type="text/javascript"> 
mui('body').on('tap','a',function(){document.location.href=this.href;});//监听让页面A标签的超链接 是有效状态 
mui.init({ 
   pullRefresh : { 
    container:"#pullrefresh",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等 
    up : { 
     height:50,//可选,默认50.触发下拉刷新拖动距离, 
     auto: true,//可选,默认false.自动下拉刷新一次 
     contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容 
     contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容 
     contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容 
     callback :function(){ 
      //业务逻辑代码，比如通过ajax从服务器获取新数据； 
        //注意，加载完新数据后，必须执行如下代码，注意：若为ajax请求，则需将如下代码放置在处理完ajax响应数据之后 
         //mui('#refresh-ul').pullRefresh().endPullupToRefresh(); //refresh completed  
          var pagecount=$("#pagecount").val(); 
          var page=$("#page").val(); 
          pagecount=parseInt(pagecount); 
          page=parseInt(page); 
          page+=1; 
          $.ajax({ 
            url:"/mobile/seckill/order/order_refresh_ajax.jhtml", 
            type: 'post', 
            datatype:'html', 
            data: {'pagecount': pagecount,'page':page}, 
            async: false,//false代表只有在等待ajax执行完毕后才执行 
            success: function(data,msg){ 
              $("#refresh-ul").append(data); 
              $("#page").val(page); 
            }, 
            error: function(data,msg){ 
              alert("error"); 
            } 
            }); 
        this.endPullupToRefresh(false); 
     } //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据； 
    } 
   } 
  }); 
if(mui.os.plus) { 
  mui.plusReady(function() { 
    setTimeout(function() { mui('#pullrefresh').pullRefresh().pullupLoading(); }, 1000); 
  }); 
} else { 
  mui.ready(function() {  
    mui('#pullrefresh').pullRefresh().pullupLoading();  
  }); 
} 
function goShoppingCart() { 
  window.location.href = "/mobile/seckill/shoppingcart.jhtml"; 
} 
</script> 





总结


以上所述是小编给大家介绍的mui上拉加载更多下拉刷新数据的封装过程，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米