master

分支 (3)

管理

管理

master

apicloud

mui

ymtap
/
list.html

<!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 type="text/css">
			#list {
				/*避免导航边框和列表背景边框重叠，看起来像两条边框似得；*/
				margin-top: -1px;
			}
		</style>
	</head>

	<body>
		<!--下拉刷新容器-->
		<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
		    <div class="mui-scroll">
				<div id="slider" class="mui-slider">
					<div class="mui-slider-group mui-slider-loop">
						<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
						<div class="mui-slider-item mui-slider-item-duplicate">
							<a href="#">
								<img src="images/yuantiao.jpg">
								<p class="mui-slider-title">静静看这世界</p>
							</a>
						</div>
						<div class="mui-slider-item">
							<a href="#">
								<img src="images/shuijiao.jpg">
								<p class="mui-slider-title">幸福就是可以一起睡觉</p>
							</a>
						</div>
						<div class="mui-slider-item">
							<a href="#">
								<img src="images/muwu.jpg">
								<p class="mui-slider-title">想要一间这样的木屋，静静的喝咖啡</p>
							</a>
						</div>
						<div class="mui-slider-item">
							<a href="#">
								<img src="images/cbd.jpg">
								<p class="mui-slider-title">Color of SIP CBD</p>
							</a>
						</div>
						<div class="mui-slider-item">
							<a href="#">
								<img src="images/yuantiao.jpg">
								<p class="mui-slider-title">静静看这世界</p>
							</a>
						</div>
						<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
						<div class="mui-slider-item mui-slider-item-duplicate">
							<a href="#">
								<img src="images/shuijiao.jpg">
								<p class="mui-slider-title">幸福就是可以一起睡觉</p>
							</a>
						</div>
					</div>
					<div class="mui-slider-indicator mui-text-right">
						<div class="mui-indicator mui-active"></div>
						<div class="mui-indicator"></div>
						<div class="mui-indicator"></div>
						<div class="mui-indicator"></div>
					</div>
				</div>

				<ul id="list" class="mui-table-view mui-table-view-chevron">

				</ul>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script>
			var aniShow = "pop-in";
			 //只有ios支持的功能需要在Android平台隐藏；
			if (mui.os.android) {
				var list = document.querySelectorAll('.ios-only');
				if (list) {
					for (var i = 0; i < list.length; i++) {
						list[i].style.display = 'none';
					}
				}
				//Android平台暂时使用slide-in-right动画
				if(parseFloat(mui.os.version)<4.4){
					aniShow = "slide-in-right";
				}
			}
			//初始化，并预加载webview模式的选项卡
			function preload () {
				mui.preload({
					url:'examples/tab-webview-main.html',
					styles: {
						popGesture: 'hide'
					}
				});
				mui.preload({
					url:"examples/pullrefresh_main.html",
					styles:{
						popGesture:'hide'
					}
				});
			}
			var templates = {};
			var getTemplate = function(name, header, content) {
				var template = templates[name];
				if (!template) {
					//预加载共用父模板；
					var headerWebview = mui.preload({
						url: header,
						id: name + "-main",
						styles: {
							popGesture: "hide",
						},
						extras: {
							mType: 'main'
						}
					});
					//预加载共用子webview
					var subWebview = mui.preload({
						url: !content ? "" : content,
						id: name + "-sub",
						styles: {
							top: '45px',
							bottom: '0px',
						},
						extras: {
							mType: 'sub'
						}
					});
					subWebview.addEventListener('loaded', function() {
						setTimeout(function() {
							subWebview.show();
						}, 50);
					});
					subWebview.hide();
					headerWebview.append(subWebview);
					//iOS平台支持侧滑关闭，父窗体侧滑隐藏后，同时需要隐藏子窗体；
					if (mui.os.ios) { //5+父窗体隐藏，子窗体还可以看到？不符合逻辑吧？
						headerWebview.addEventListener('hide', function() {
							subWebview.hide("none");
						});
					}
					templates[name] = template = {
						name: name,
						header: headerWebview,
						content: subWebview,
					};
				}
				return template;
			};
			var initTemplates = function() {
				getTemplate('default', 'examples/template.html');
			};
			// mui初始化
			mui.init({
		        pullRefresh : {
		            container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
		            down : {
		                contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
		                contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
		                contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
		                callback :pullfresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
		            },
		            up: {
		                contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
		                contentnomore: '没有更多内容了', //可选，请求完毕若没有更多数据时显示的提醒内容；
		                callback: pullloading //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
		            }
		        },
		        swipeBack: false
		    });
			//初始化分页数据
			var total=0,page=1;

			mui.plusReady(function() {
				//读取本地存储，检查是否为首次启动
				var showGuide = plus.storage.getItem("lauchFlag");
				if(showGuide){
					//有值，说明已经显示过了，无需显示；
					//关闭splash页面；
					plus.navigator.closeSplashscreen();
					plus.navigator.setFullscreen(false);
					//初始化模板
					initTemplates();
					//预加载
					preload();
					var sliderImg=plus.storage.getItem('sliderImg');
					getSlider();
					if(sliderImg){
						mui("#slider").innerHTML=sliderImg.data;
						appInitSlide();
						var datetime=getDateTime();
						if(sliderImg.datetime>datetime+86400){
							getSlider();
						}
					}else{
						getSlider();
					}
					var dataList=plus.storage.getItem('dataList');
					if(dataList){
						mui("#list").innerHTML(dataList.data);
						var datetime=getDateTime();
						if(dataList.datetime>datetime+86400){
							getSlider();
						}
					}
				}else{
					//显示启动导航
					mui.openWindow({
						id:'guide',
						url:'examples/guide.html',
						show:{
							aniShow:'none'
						},
						waiting:{
							autoShow:false
						}
					});
					//延迟的原因：优先打开启动导航页面，避免资源争夺
					setTimeout(function () {
						//初始化模板
						initTemplates();
						//预加载
						preload();
					},200);
				}
			});

			//获取首页幻灯片列表
			function getSlider(){
				mui.post('http://www.5iymt.com/index.php?g=App&m=Index&a=get_slide',
				{name:"name"}
				,function(data){
					alert(data);
					//服务器返回响应，根据响应结果
					if(data.status){
						mui("#slider").innerHTML=data.data;
						appInitSlide();
						var datatime=getDateTime();
						var sliderImg={'data':data.data,'datatime':datatime}
						//保存缓存
						plus.storage.setItem("sliderImg", sliderImg);

					}else{
						console.log('slder获取失败');
					}

				}
				,'json'
				);
			}
		getIndexList();
		alert(10);
			//获取首页文章列表
			function getIndexList(){
		        var html='';
				mui.post('http://www.5iymt.com/index.php?g=App&m=Index&a=index',{page:1},function(data){

						//服务器返回响应，根据响应结果
						if(data.status){
							total=data.total;
				            page=data.page;
				            var element = document.getElementById("list");

				            if(total==0){
				                setTimeout(function() {
				                    html='<li class="mui-table-view-cell mui-media" style="text-align: center;">无更多数据</li>';
				                    element.innerHTML = html;
				                    mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
				                    console.log('没有数据');
				                }, 800);
				            }
				            else{
				                mui('#refreshContainer').pullRefresh().refresh(true);
				                var rows=data.data;
				                count=rows.length;

				                //使用function拼接html数据
				                html=importListHtml(rows);

				                element.innerHTML = html;

								var datatime=getDateTime();
								var dataList={'data':html,'datatime':datatime}
								//保存缓存
								plus.storage.setItem("dataList", dataList);
				            }
		        			mui('#refreshContainer').pullRefresh().endPulldownToRefresh();

						}
						else{
							console.log('文章获取失败');
						}
					},"JSON");
			}
			//获得时间戳
			function getDateTime(){
				var date=new Date();
				return date.getTime();
			}
			//初始化slide
			function appInitSlide(name="#slider"){
				//轮播图滑动
				mui(name).slider({
					interval: 5000
				});
			}
			 //主列表点击事件
			mui('#list').on('tap', 'a', function() {
				var id = this.getAttribute('href');
				var href = this.href;
				var type = this.getAttribute("open-type");
				//不使用父子模板方案的页面
				if (type == "common") {
					var webview_style = {
						popGesture: "close"
					};
					//侧滑菜单需动态控制一下zindex值；
					if (~id.indexOf('offcanvas-')) {
						webview_style.zindex = 9998;
						webview_style.popGesture = ~id.indexOf('offcanvas-with-right') ? "close" : "none";
					}
					//图标界面需要启动硬件加速
					if(~id.indexOf('icons.html')){
						webview_style.hardwareAccelerated = true;
					}
					mui.openWindow({
						id: id,
						url: this.href,
						styles: webview_style,
						show: {
							aniShow: aniShow
						},
						waiting: {
							autoShow: false
						}
					});
				} else if (id && ~id.indexOf('.html')) {
					if (!mui.os.plus || (!~id.indexOf('popovers.html')&&mui.os.ios)) {
						mui.openWindow({
							id: id,
							url: this.href,
							styles: {
								popGesture: 'close'
							},
							show: {
								aniShow: aniShow
							},
							waiting: {
								autoShow: false
							}
						});
					} else {
						//TODO  by chb 当初这么设计，是为了一个App中有多个模板，目前仅有一个模板的情况下，实际上无需这么复杂
						//使用父子模板方案打开的页面
						//获得共用模板组
						var template = getTemplate('default');
						//判断是否显示右上角menu图标；
						var showMenu = ~href.indexOf('popovers.html') ? true : false;
						//获得共用父模板
						var headerWebview = template.header;
						//获得共用子webview
						var contentWebview = template.content;
						var title = this.innerText.trim();
						//通知模板修改标题，并显示隐藏右上角图标；
						mui.fire(headerWebview, 'updateHeader', {
							title: title,
							showMenu: showMenu,
							target:href,
							aniShow: aniShow
						});

						if(mui.os.ios||(mui.os.android&&parseFloat(mui.os.version)<4.4)){
							var reload = true;
							if (!template.loaded) {
								if (contentWebview.getURL() != this.href) {
									contentWebview.loadURL(this.href);
								} else {
									reload = false;
								}
							} else {
								reload = false;
							}
							(!reload) && contentWebview.show();

							headerWebview.show(aniShow, 150);
						}
					}
				}
			});
			var index = null; //主页面
			function openMenu() {
				!index && (index = mui.currentWebview.parent());
				mui.fire(index, "menu:open");
			}
			//在android4.4.2中的swipe事件，需要preventDefault一下，否则触发不正常
			window.addEventListener('dragstart', function(e) {
				mui.gestures.touch.lockDirection = true; //锁定方向
				mui.gestures.touch.startDirection = e.detail.direction;
			});
			window.addEventListener('dragright', function(e) {
				if (!mui.isScrolling) {
					e.detail.gesture.preventDefault();
				}
			});
			 //监听右滑事件，若侧滑菜单未显示，右滑要显示菜单；
			window.addEventListener("swiperight", function(e) {
				//默认滑动角度在-45度到45度之间，都会触发右滑菜单，为避免误操作，可自定义限制滑动角度；
				if (Math.abs(e.detail.angle) < 4) {
					openMenu();
				}
			});

			//下拉刷新
			function pullfresh (){
				//刷新相当于重新获取内容
				getIndexList();
		    }
			//滑动加载
		    function pullloading(){
		        if(total!=0&&count>=total){
		            this.endPullupToRefresh(true);
		        }else{
		            var html="";
		            mui.post(baseurl,{
		                page:page
		            },function(data){
		                var rows=data.data;
		                page=data.page;

		                if(total==0){
		                    total=data.total;
		                }
		                count+=rows.length;
		                //使用function拼接html数据
		                html=importListHtml(rows);

		                var element=document.getElementById("list");
		                element.innerHTML+=html;

		                if(count>=total){
		                    this.endPullupToRefresh(true);
		                }else{
		                    this.endPullupToRefresh(false);
		                }
		            },'json')
		        }
		    }

		    //拼接列表html
		    function importListHtml(rows,type=false){
		    	var html='';
	    		for(var i=0;i<rows.length;i++){
                    html+= '<li class="mui-table-view-cell mui-media">'+
	                            '<a class="mui-navigate-right" href="'+infourl+'&id='+rows[i].id+'">'+
		                            '<img class="mui-media-object mui-pull-left" src="'+rows[i].img+'" style="width: 100%">'+
		                            '<div  class="mui-media-body">
		                            	cutstr(rows[i].name,15)+
			                            '<p class="mui-ellipsis">'+cutstr(rows['i'].desc,15)+ '</p>
									</div>
								</a>
							</li>';
	                }
		        return html;
		    }
			/**
			 * js截取字符串，中英文都能用
			 * @param str：需要截取的字符串
			 * @param len: 需要截取的长度
			 */
			function cutstr(str,len)
			{
			   var str_length = 0;
			   var str_len = 0;
			      str_cut = new String();
			      str_len = str.length;
			      for(var i = 0;i<str_len;i++)
			     {
			        a = str.charAt(i);
			        str_length++;
			        if(escape(a).length > 4)
			        {
			         //中文字符的长度经编码之后大于4
			         str_length++;
			         }
			         str_cut = str_cut.concat(a);
			         if(str_length>=len)
			         {
			         str_cut = str_cut.concat("...");
			         return str_cut;
			         }
			    }
			    //如果给定字符串小于指定长度，则返回源字符串；
			    if(str_length<len){
			     return  str;
			    }
			}

		</script>
	</body>

</html>