mui 单页面下拉刷新
Posted topcoder
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了mui 单页面下拉刷新相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello MUI</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"> <link rel="stylesheet" href="../css/mui.min.css"> <style> html, body { background-color: #efeff4; } .mui-pull-top-tips { position: absolute; top: -20px; left: 50%; margin-left: -25px; width: 40px; height: 40px; border-radius: 100%; z-index: 1; } .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-canvas canvas { width: 40px; } .mui-slider-indicator.mui-segmented-control { background-color: #efeff4; } </style> </head> <body> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">mui下拉刷新</h1> </header> <div id="slider" class="mui-slider mui-fullscreen"> <div class="mui-slider-group"> <div id="item1mobile" class="mui-slider-item mui-control-content mui-active"> <div class="mui-scroll-wrapper"> <div class="mui-scroll"> <ul class="mui-table-view"> <li class="mui-table-view-cell"> 选项卡子项-1 </li> <li class="mui-table-view-cell"> 选项卡子项-2 </li> <li class="mui-table-view-cell"> 选项卡子项-3 </li> <li class="mui-table-view-cell"> 选项卡子项-4 </li> <li class="mui-table-view-cell"> 选项卡子项-5 </li> </ul> </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> mui.init(); (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) { $(pullRefreshEl).pullToRefresh({ down: { callback: function() { var self = this; setTimeout(function() { var ul = self.element.querySelector(‘.mui-table-view‘); ul.insertBefore(createFragment(ul, index, 10, true), ul.firstChild); self.endPullDownToRefresh(); }, 1000); } }, }); }); var createFragment = function(ul, index, count, reverse) { 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 = ‘选项卡子项-‘ + (length + (reverse ? (count - i) : (i + 1))); fragment.appendChild(li); } return fragment; }; }); })(mui); </script> </body> </html>
<!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></title> <link rel="stylesheet" href="../css/mui.min.css" /> </head> <body> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">公告1</h1> </header> <div class="mui-content"> <div id="slider" class="mui-slider mui-fullscreen"> <div class="mui-slider-group" id="pullrefresh"> <div id="item1mobile" class="mui-slider-item mui-control-content mui-active"> <div class="mui-scroll-wrapper"> <div class="mui-scroll"> <ul id="list" class="mui-table-view"> </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 src="../js/api.js"></script> <script> mui.init(); var count = 1; (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) { $(pullRefreshEl).pullToRefresh({ down: { callback: function() { var self = this; setTimeout(function() { count=1; ajax_get_data(this,‘down‘,1); self.endPullDownToRefresh(); }, 1000); } }, up: { contentrefresh: ‘正在加载...‘, callback: function() { var self = this; setTimeout(function() { count=count+1; ajax_get_data(this,‘up‘,count); self.endPullUpToRefresh(); }, 1000); } }, }); }); var ajax_get_data = function(self,type,count) { user_token = localStorage.getItem("user_token"); user_token_obj = JSON.parse(user_token); mui.ajax(api_url + ‘/public/laoodao_oa/?service=Notice.get_notice_list‘, { data: { token: user_token_obj.token, page: count }, dataType: ‘json‘, type: ‘get‘, timeout: 10000, crossDomain: true, async: false, success: function(data) { if(data.data.code > 0) { var str=""; var fragment = document.createDocumentFragment(); mui.each(data.data.data, function(index, item) { //字符串拼接 str +="<a href=‘gonggao_xqy.html‘><li class=\"mui-card\">" + "<div class=\"zbcolor\"></div>" + "<div class=\"mui-card-content\">" + "<div class=\"mui-card-content-inner\">" + "<p class=\"txtTitle\">" + item.pubdate.substring(0, 4) + "年 " + item.title + "</p>" + "<p class=\"txtContent\">" + item.my_desc + "</p>" + "<p class=\"txtNote\"><span class=\"mui-pull-left\">" + item.pubdate + " " + item.publisher + "</span><span class=\"mui-pull-right\"></span></p>" + "</div>" + "</div>"+ "</a>"; "</li>"; //fragment拼接 li = document.createElement(‘li‘); li.className = ‘mui-card‘; li.innerHTML = "<a href=‘gonggao_xqy.html‘><div class=\"zbcolor\"></div>" + "<div class=\"mui-card-content\">" + "<div class=\"mui-card-content-inner\">" + "<p class=\"txtTitle\">" + item.pubdate.substring(0, 4) + "年 " + item.title + "</p>" + "<p class=\"txtContent\">" + item.my_desc + "</p>" + "<p class=\"txtNote\"><span class=\"mui-pull-left\">" + item.pubdate + " " + item.publisher + "</span><span class=\"mui-pull-right\"></span></p>" + "</div>" + "</div>"+ "</a>"; fragment.appendChild(li); }); if(type=="down") { var ul = document.getElementById("list"); ul.innerHTML=str; } if(type=="up") { var ul = document.getElementById("list"); ul.appendChild(fragment); } console.log(count); }else{ mui.toast(data.data.msg); } } } ); }; ajax_get_data(null,‘down‘,1); var change_color = function() { for(var i = 0; i < mui(".zbcolor").length; i++) { var mod = (i % 5); switch(mod) { case 0: mui(".zbcolor")[i].style.background = "#FF8F09"; break; case 1: mui(".zbcolor")[i].style.background = "#FD686C"; break; case 2: mui(".zbcolor")[i].style.background = "#F7B449"; break; case 3: mui(".zbcolor")[i].style.background = "#07C391"; break; case 4: mui(".zbcolor")[i].style.background = "#A79CCB"; break; } } } }); })(mui); </script> </body> </html>
以上是关于mui 单页面下拉刷新的主要内容，如果未能解决你的问题，请参考以下文章
mui 框架中结合mui.ajax实现 下拉刷新和上拉加载功能
关于mui中一个页面有有多个页签进行切换的下拉刷新加搜索问题