mui小总结

下拉刷新

第一:

mui.init({
		pullRefresh: {
			container: ‘#pullrefresh‘,
			up: {
				contentrefresh: ‘正在加载...‘,
				callback: pullupRefresh
			}
		}
	});

  

第二:

	var i = 0;
	var count = 0;
	var number = 1;
	function pullupRefresh(){
		setTimeout(function(){
			$(function(){
				var json = {};
				json.competitionID = CompetitionID;
				json.fightTypeID = fightTypeID;
				json.action = ‘getFightType‘;
				$.post(‘http://192.168.3.12:11000/api/Competition‘, json, function(e){
					var obj = eval("(" + e + ")");
					var data = obj.data[0].v_teamfight;
					if(number > data.length){
						number = data.length;
					}
					var counts = parseInt(data.length/2)+1;    //定义上拉次数
					mui(‘#pullrefresh‘).pullRefresh().endPullupToRefresh((++count >counts)); //判定是否拖动
					for(i; i < number; i++){
						var str = ‘‘;
                                                str += "<span>" + data[i].TeamAName + "</span>"; //A队名称
						str += "</div><div>vs</div><div>";
						str += "<img src=‘../../img/hwq/gold.png‘/>"; //B队logo路径(暂无)
						str += "<span>" + data[i].TeamBName + "</span>"; //B队名称
                                                $("#content").append(str);
                                         }
                                     number+=1;
				});
			});
		},100);
	}
        

第三:

if(mui.os.plus){
		mui.plusReady(function(){
			setTimeout(function(){
				mui(‘#pullrefresh‘).pullRefresh().pullupLoading();
			},10);
		});
	}
	else {
		mui.ready(function() {
			mui(‘#pullrefresh‘).pullRefresh().pullupLoading();
		});
	}

  

时间: 2024-10-05 04:44:58

mui小总结的相关文章

MUI(3)

本篇博文是继续上篇博文MUI(2).上面这幅图是博文MUI(1)中实现的效果,在博文MUI(1)中提到了2个页面,一个页面是index.html,另一个页面是index_list.html页面.上面这幅图中红色框子是index.html页面,蓝色框子是index_list.html页面.两个页面本来是独立的两个页面,但是组合在一起之后就形成了如上面这幅图所示的效果.在一个页面中显示另一个页面. 实现方法很简单, 1 <script type="text/javascript" c

MUI(4)

今天感觉无聊,想听一首音乐.没有添加其他页面,只是在index_list.html页面进行代码添加而已. 1 <!doctype html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <meta name="viewport" content="width=device-width,initi

MUI(1)

今天小编用HBuilder+MUI开发移动APP,不用Android原生也不用IOS原生,仅仅用HTML5+MUI.小编也是初学者所以如有不准确的地方望大家指出帮助小编改正,同时也可以促进大家的深入学习. HBuilder的下载官网地址:http://www.dcloud.io/:MUI官网下载地址:https://www.muicss.com/. HBuilder是免费的,但是仅仅需要登录,安心注册,方向登录使用,完全免费的. 第一次启动HBuilder需要登录和简单的设置不过很easy啦.启

MUI(5)

今天实现9宫格菜单.先上效果图: 就是这个效果咯,界面不太美观,底部导航栏是为了苹果用户没有返回按键设计的,只是为了方便演示而已,没有做过多的处理.首先先说一下这个底部导航栏如何实现,这个底部导航栏小编我写在了主页面index.html中,下面附上代码: 1 <!-- 底部nav开始 --> 2 <nav class="mui-bar mui-bar-tab"> 3 <a id="goBack" class="mui-tab-

MUI体验框架

1.      mui简介 1.1  缘起 mui框架在2014.05立项,2014.08在iweb峰会上发布,我们不是闲着没事,重复制造轮子,只是实在没有适合mobile开发的前端框架: 1.基于jq的jqmobile,性能低的无法忍受,且UI难看 2.bootstrap这种响应式设计,性能在低端机不足,而且UI风格一看就是网页,不是App的感觉. 3.framework7当时只能在iPhone上运行也无法被接受. 4.基于angular的ionic,把pc端很重的东西引入到移动App中,且a

【MUI框架】学习笔记整理 Day 1

MUI 框架之 [原生UI] (1)accordion(折叠面板) 由二级列表演化而来 1 <ul class="mui-table-view"> 2 <li class="mui-table-view-cell mui-collapse"> 3 <a class="mui-navigate-right" href="#"></a> 4 <div class="m

利用 MUI开发app, 如何实现侧滑菜单及其主体部分上下滑动

 利用mui开发APP 之侧滑菜单主内容滚动问题 MUI作为开发者常用的框架之一,其号称最接近原生APP体验的高性能前端框架.因此利用mui开发移动APP,可以为开发者提供很大的便利和接近原生的体验.但是,在实现一些复杂功能的过程中,难免遇到一些小问题.博主将以自己在项目开发中的一些的经验,陆续对mui使用中容易遇到的小问题,予以解答和分享,希望能帮到更多的开发者朋友. 最近,博主在项目开发过程中遇到这样一个问题,即利用mui侧滑菜单模块,实现APP的侧滑菜单效果时,侧滑菜单加入以后,将影响自身

mui开发app之联网应用传输数据

手机的app分为,在线和单机,在线就是类似于C/S模式,能与服务器与他人共享数据的程序,单机就是在没有网络下可以玩转的app. 目前互联网盛行的时代,99%的程序都是联网环境下工作的.那么如何开发本地app并且能通过网络将数据上传至服务器共享成为了在线app的开发重点. 首先请理解B/S的工作模式,在web程序中,我们只是向http服务器请求了地址,服务器(无论是apache,tomcat,nginx这些都是实现了http socket的程序)返回给我们html文件,浏览器呢,对html进行解释

MUI(2)

本篇博文是继续MUI(1)博文. 上一篇博文小编写了两个页面,一个页面只写了一个头部导航栏,另一个页面写了一个按钮,然后这两个页面进行合并显示,即在头部导航栏页面加载显示另一个页面的按钮.仔细观察上一篇的最后截图效果会发现,在头部导航栏的左上角有一个侧滑图标,本篇博文就是实现一个侧滑菜单效果. 还是继续上一篇博文中应用到的项目,只是在之前项目的基础之上新建了一个页面,index_menu.html页面.index.html页面源代码如下: 1 <!DOCTYPE html> 2 <htm