mui的上拉刷新和下拉加载（动态加载）

最新推荐文章于 2024-09-13 22:15:00 发布

大海无量波涛凶

最新推荐文章于 2024-09-13 22:15:00 发布

阅读量3.1k

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/qq_37164847/article/details/86686776

版权

web 专栏收录该内容

145 篇文章 4 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>社区</title>
       <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
       <meta name="apple-mobile-web-app-capable" content="yes">
       <meta name="apple-mobile-web-app-status-bar-style" content="black">
       
       <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
       <meta http-equiv="Pragma" content="no-cache" />
       <meta http-equiv="Expires" content="0" />
       
       <link rel="stylesheet" href="css/mui.min.css">
       
       <link rel="stylesheet" type="text/css" href="css/app.css"/>
               <style>
           html,
           body {
               background-color: #efeff4;
           }
           .mui-bar~.mui-content .mui-fullscreen {
               top: 44px;
               height: auto;
           }
           .mui-pull-top-tips {
               position: absolute;
               top: -20px;
               left: 50%;
               margin-left: -25px;
               width: 40px;
               height: 40px;
               border-radius: 100%;
               z-index: 1;
           }
           .mui-bar~.mui-pull-top-tips {
               top: 24px;
           }
           .mui-pull-top-wrapper {
               width: 42px;
               height: 42px;
               display: block;
               text-align: center;
               background-color: #efeff4;
               border: 1px solid #ddd;
               border-radius: 25px;
               background-clip: padding-box;
               box-shadow: 0 4px 10px #bbb;
               overflow: hidden;
           }
           .mui-pull-top-tips.mui-transitioning {
               -webkit-transition-duration: 200ms;
               transition-duration: 200ms;
           }
           .mui-pull-top-tips .mui-pull-loading {
               /*-webkit-backface-visibility: hidden;
               -webkit-transition-duration: 400ms;
               transition-duration: 400ms;*/

               margin: 0;
           }
           .mui-pull-top-wrapper .mui-icon,
           .mui-pull-top-wrapper .mui-spinner {
               margin-top: 7px;
           }
           .mui-pull-top-wrapper .mui-icon.mui-reverse {
               /*-webkit-transform: rotate(180deg) translateZ(0);*/
           }
           .mui-pull-bottom-tips {
               text-align: center;
               background-color: #efeff4;
               font-size: 15px;
               line-height: 40px;
               color: #777;
           }
           .mui-pull-top-canvas {
               overflow: hidden;
               background-color: #fafafa;
               border-radius: 40px;
               box-shadow: 0 4px 10px #bbb;
               width: 40px;
               height: 40px;
               margin: 0 auto;
           }
           .mui-pull-top-canvas canvas {
               width: 40px;
           }
           .mui-slider-indicator.mui-segmented-control {
               background-color: #efeff4;
           }
       </style>
   </head>
   <body>
       
       <div class="mui-content">
           <div id="slider" class="mui-slider mui-fullscreen">
               <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                   <div id="allTitle" class="mui-scroll">
                       
                   </div>
               </div>
               <div id="allTopic" class="mui-slider-group">
                   
                       <div class="mui-scroll-wrapper">
                           <div class="mui-scroll">
                               <ul class="mui-table-view">
                                   <li class="mui-table-view-cell">
                                       第6个选项卡子项-1
                                   </li>
                                   <li class="mui-table-view-cell">
                                       第6个选项卡子项-2
                                   </li>
                                   <li class="mui-table-view-cell">
                                       第6个选项卡子项-3
                                   </li>
                                   <li class="mui-table-view-cell">
                                       第6个选项卡子项-4
                                   </li>
                                   <li class="mui-table-view-cell">
                                       第6个选项卡子项-5
                                   </li>
                                   <li class="mui-table-view-cell">
                                       第6个选项卡子项-6
                                   </li>
                                   <li class="mui-table-view-cell">
                                       第6个选项卡子项-7
                                   </li>
                                   <li class="mui-table-view-cell">
                                       第6个选项卡子项-8
                                   </li>
                                   <li class="mui-table-view-cell">
                                       第6个选项卡子项-9
                                   </li>
                                   <li class="mui-table-view-cell">
                                       第6个选项卡子项-10
                                   </li>
                                   <li class="mui-table-view-cell">
                                       第6个选项卡子项-11
                                   </li>
                                   <li class="mui-table-view-cell">
                                       第6个选项卡子项-12
                                   </li>
                                   <li class="mui-table-view-cell">
                                       第6个选项卡子项-13
                                   </li>
                                   <li class="mui-table-view-cell">
                                       第6个选项卡子项-14
                                   </li>
                                   <li class="mui-table-view-cell">
                                       第6个选项卡子项-15
                                   </li>
                                   <li class="mui-table-view-cell">
                                       第6个选项卡子项-16
                                   </li>
                                   <li class="mui-table-view-cell">
                                       第6个选项卡子项-17
                                   </li>
                                   <li class="mui-table-view-cell">
                                       第6个选项卡子项-18
                                   </li>
                                   <li class="mui-table-view-cell">
                                       第6个选项卡子项-19
                                   </li>
                                   <li class="mui-table-view-cell">
                                       第6个选项卡子项-20
                                   </li>
                               </ul>
                           </div>
                       </div>
                   </div>
               </div>
           </div>
       </div>
       <script src="js/mui.min.js"></script>
       <script src="js/mui.pullToRefresh.js"></script>
       <script src="js/mui.pullToRefresh.material.js"></script>
       <script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script>
       <script type="text/javascript" src="js/Convert_Pinyin.js" ></script>
       <script>
           mui.init();
           loadTitleData();
           loadtopicData();
           function loadTitleData () {
               var fragment = document.getElementById("allTitle");
               var list;
               for (var i=0;i<6;i++) {
                   list = document.createElement('a');
                   if (i==0) {
                       list.className="mui-control-item mui-active";
                   } else{
                       list.className="mui-control-item";
                   }
                   var dizhi="#item"+i;
                   list.href=dizhi;
                   list.innerHTML="第"+i+"个标题";
                   fragment.appendChild(list);
               }
           }
           function loadtopicData(){
               var fragment = document.getElementById("allTopic");
               var list;
               for (var i=0;i<6;i++) {
                   var topicTypeName="第"+i+"个选项卡";
                   var fullName=pinyin.getFullChars(topicTypeName);
                   console.log("转拼音=="+fullName);
                   var ulid=fullName;
                   list = document.createElement('div');
                   list.id="item"+i;
                   if (i==0) {
                       list.className="mui-slider-item mui-control-content mui-active";
                   } else{
                       list.className="mui-slider-item mui-control-content";
                   }
                   list.innerHTML='<div class="mui-scroll-wrapper">'+
                   '<div class="mui-scroll">'+
                   '<ul id='+fullName+' class="mui-table-view">'+
                   '</ul>'+
                   '</div>'+
                   '</div>';
                   fragment.appendChild(list);
                   //loadulData(topicTypeName,6,ulid);

               }
           }
           function loadulData(topicTypeName,data,ulid){
               console.log("uId=="+ulid);
               if (ulid=="QuanBu") {
                   ulid="ulfirst";
               }
               var fragment = document.getElementById(ulid);
               $(("#"+ulid)).empty();//清空
               fragment.className="mui-table-view";
               if(data==null||data<=0){
                   var beijing=document.createElement('div');
                   beijing.className ='beijing';
                   var topic_neirong;
                   switch (topicTypeName){
                       case "待审核":
                           topic_neirong='<img style="width:70px" class="beijing_img" src="img/fatie.png" />'+
                   '<p>没有审核的内容</p>';
                           break;
                       case "我参与的":
                           topic_neirong='<img style="width:70px" class="beijing_img" src="img/fatie.png" />'+
                   '<p>没有我参与的内容</p>';
                       break;
                       case "我发布的":
                           topic_neirong='<img style="width:70px" class="beijing_img" src="img/fatie.png" />'+
                   '<p>没有我发布的内容</p>';
                       break;
                       case "未阅话题":
                           topic_neirong='<img style="width:70px" class="beijing_img" src="img/fatie.png" />'+
                   '<p>没有未阅话题的内容</p>';
                       break;
                       default:
                           topic_neirong='<img style="width:70px" class="beijing_img" src="img/fatie.png" />'+
                   '<p>社区话题招募楼主，快来抢沙发～</p>';
                           break;
                   }
                   beijing.innerHTML=topic_neirong;
                   fragment.appendChild(beijing);
               }else{
                   for (var i = 0; i < data; i++) {
                       li = document.createElement('li');
                       li.className = 'mui-table-view-cell';
                       li.id=i;
                       var mainimge;
                       if (mainimge==null) {
                           mainimge="img/moren.png";
                       }

var author="匿名";

                       var zan_number=2;//点赞数量
                       if (zan_number==0||zan_number==undefined) {
                           //mui-media-object图片类
                           li.innerHTML = '<div>'+
                           '<img οnerrοr="nofind();" class="mui-pull-right myimage" src='+mainimge+'>'+
                           '<div class="mui-media-body"><p class="mui-ellipsis wenzi_yanse_he">'+i+'</p></div>'+
                           '<div class="xiaochu_fudong"></div>'+
                           '</div>'+
                           '<div class="dibu">'+
                           '<div class="dibu_zuo" ><span class="wenzi_yanse_hui">'+author+'</span></div>'+
                           '<div class="dibu_you" ><span class="wenzi_yanse_hui">'+i+'</span></div>'+
                           '<div class="xiaochu_fudong"></div>'+
                           '</div>';
                       } else{
                           //mui-media-object图片类
                           li.innerHTML = '<div>'+
                           '<img οnerrοr="nofind();" class="mui-pull-right myimage" src='+mainimge+'>'+
                           '<div class="mui-media-body"><p class="mui-ellipsis wenzi_yanse_he">'+i+'</p></div>'+
                           '<div class="xiaochu_fudong"></div>'+
                           '</div>'+
                           '<div class="dibu">'+
                           '<div class="dibu_zuo" ><span class="wenzi_yanse_hui">'+author+'</span><span class="wenzi_yanse_hui">'+zan_number+"赞"+'</span></div>'+
                           '<div class="dibu_you" ><span class="wenzi_yanse_hui">'+i+'</span></div>'+
                           '<div class="xiaochu_fudong"></div>'+
                           '</div>';
                       }
                       fragment.appendChild(li);
                   }
                   console.log("加载帖子完成");

               }
           }
           (function($) {
               //阻尼系数
               var deceleration = mui.os.ios?0.003:0.0009;
               $('.mui-scroll-wrapper').scroll({
                   bounce: false,
                   indicators: true, //是否显示滚动条
                   deceleration:deceleration
               });
               $.ready(function() {
                   //循环初始化所有下拉刷新，上拉加载。
                   $.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
                       console.log("循环初始化所有下拉刷新，上拉加载。index=="+index);
                       $(pullRefreshEl).pullToRefresh({
                           down: {
                               callback: function() {
                                   console.log("下拉刷新");
                                   var self = this;
                                   setTimeout(function() {
                                       var ul = self.element.querySelector('.mui-table-view');
                                       console.log("ul =="+ul );
                                       console.log("index=="+index);
                                       ul.insertBefore(createFragment(ul, index, 10, true), ul.firstChild);
                                       self.endPullDownToRefresh();
                                   }, 1000);
                               }
                           },
                           up: {
                               callback: function() {
                                   console.log("上拉加载更多");
                                   var self = this;
                                   setTimeout(function() {
                                       var ul = self.element.querySelector('.mui-table-view');
                                       ul.appendChild(createFragment(ul, index, 5));
                                       self.endPullUpToRefresh();
                                   }, 1000);
                               }
                           }
                       });
                   });
                   var createFragment = function(ul, index, count, reverse) {
                       console.log("第"+index+"个选项卡选项");
                       var length = ul.querySelectorAll('li').length;
                       var fragment = document.createDocumentFragment();
                       var li;
                       for (var i = 0; i < count; i++) {
                           li = document.createElement('li');
                           li.className = 'mui-table-view-cell';
                           li.innerHTML = '第' + (index) + '个选项卡子项-' + (length + (reverse ? (count - i) : (i + 1)));
                           fragment.appendChild(li);
                       }
                       return fragment;
                   };
               });
           })(mui);
           document.querySelector('.mui-slider').addEventListener('slide', function(event) {
               //alert("滑动监听=="+event.detail.slideNumber);

           });
       </script>
   </body>
</html>