2021-08-16

最新推荐文章于 2021-11-17 11:36:58 发布

笨笨的幸福1230

最新推荐文章于 2021-11-17 11:36:58 发布

阅读量132

点赞数

本文链接：https://blog.youkuaiyun.com/qq_42709302/article/details/119734360

版权

mescroll 多标签的上拉加载下拉刷新以及搜索

<!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" />
		<meta name="screen-orientation" content="portrait" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<meta name="full-screen" content="yes">
		<meta name="x5-fullscreen" content="true">
		<title>待办</title>
		<!--公共样式-->	
		<script src="js/config.js"></script>
		<script src="js/common.js"></script>
	    <link rel="stylesheet" href="css/mui.min.css" />
	    <link rel="stylesheet" href="css/common.css" />
	    <link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
		<!--字体大小,背景色-->
		<link rel="stylesheet" type="text/css" href="switch/font_size/medium.css"/>
		<link rel="stylesheet" href="switch/skin/skin_0.css" />
		<!--引入样式-->
		<link rel="stylesheet" href="css/tongYong-logo.css" />
		<link rel="stylesheet" href="option/mescroll.min.css" />
		<link rel="stylesheet" href="switch/skin/skin_0.css" id="skin" />
		<!--动态加载字体大小以及样式-->
		<script type="text/javascript" charset="utf-8">
			var font_size = window.localStorage.getItem("font_size");
			loadStyle('switch/font_size/' + font_size + '.css');
		</script>
		<script src="js/mui.min.js"></script>
		<script src="js/jquery-3.1.0.min.js"></script>
		<script src="js/swiper.min.js"></script>
		<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
		<!--字体 北京 颜色 切换js-->
		<script src="js/switch.js"></script>
		<script src="js/cookieSkin.js"></script>
		<script src="option/mescroll.min.js"></script>
		<script src="js/vue/vue.min.js"></script>
		<style type="text/css">
			.mui-segmented-control.mui-scroll-wrapper {
			    height: 40px;
			}
			.mui-segmented-control .mui-control-item{
				height: 40px;
				line-height: 40px;
			}
			.mui-bar-nav.mui-bar .mui-icon.sousuo {
			     margin-right: 0; 
			}
			.mui-ellipsis {
				min-height: 21px;
			}
			.mui-segmented-control.mui-scroll-wrapper .mui-control-item{
				padding: 0 30px;
			}
			.mui-scroll-wrapper {
			    overflow-y: auto;
			}
			.loading{
				display: none;
				width: 5rem;
				margin: 43% auto;
				text-align: center;
				font-size: .8rem;
				color: #9e9e9e;
			}
			.loading img{
				width: 2.1rem!important;
			}
			.mui-segmented-control.mui-scroll-wrapper .mui-control-item {
			    padding: 0 30px;
			}
			.mui-input-row {
			    position: relative;
			    top: -42px;
			}
			.header_search {
			    width: 80%;
			    position: absolute;
			    left: 54%;
			    transform: translateX(-50%);
			    top: 3px;
			}
			.unit{
				margin-top: 3px;
			}
			.symbol{
				line-height: 14px;
				margin-top: 5px;
			}
			.duihuaList {
			    padding: 10px 0 5px;
			}
			.symbol span{
				display: inline-block;
			}
			.flexStar {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
			}
			.mui-slider .mui-slider-group .mui-slider-item img.empty-icon {
			    width: 40%;
			    position: relative;
			    top: 40%;
			    /* margin-top: 38%; */
			}
			.color_hui {
			    color: #979797;
			}
			.bg_red {
			    background: #f67562;
			}
			.bg_lan {
			    background: #0177d7;
			}
			.color_hei {
			    color: #333;
			}
			.color_hui {
			    color: #979797;
			}
			.bg_red {
			    background: #f67562;
			}
			.bg_lan {
			    background: #0177d7;
			}
			.bg_zi{
				background: #c197fd!important;;
			}
			.bg_ju{
				background: #fbbb4e!important;;
			}
			.bg_lv{
				background: #10dbba!important;;
			}
			.bg_qlv{
				background: #66d6ab!important;;
			}
			.bg_qred{
				background: #e76556!important;;
			}
			.bg_jured{
				background: #f1845b!important;;
			}
			.bg_szi{
				background: #de4af2!important;;
			}
			.mui-segmented-control.mui-scroll-wrapper .mui-control-item {
			    padding: 0 15px;
			}
			.mui-table-view .mui-media-object {
			    line-height: 36px!important;
			    width: 55px!important;
			    max-width: 55px!important;
			    height: 36px!important;
			    border-radius: 3px!important;
			}
			.mui-table-view .mui-media-object.mui-pull-left{
				font-size: 12px;
			}
		</style>
	</head>
	<body class="mui-plus mui-statusbar mui-statusbar-offset">
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <div class="mui-input-row mui-search header_search">
				<input type="search" id="search" class="mui-input-clear font13" placeholder="标题">
			</div>
		</header>
		<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 class="mui-scroll" id="nav">
						<a class="mui-control-item mui-active" href="#item1mobile">
							<span>全部文件</span>
						</a>
						<a class="mui-control-item" href="#item2mobile">
							<span>办公系统</span>
						</a>
						<a class="mui-control-item" href="#item3mobile">
							<span>代表履职</span>
						</a>
						<a class="mui-control-item" href="#item4mobile">
							<span>电子阅文</span>
						</a>
						<a class="mui-control-item" href="#item5mobile">
							<span>预算联网</span>
						</a>
					</div>
				</div>
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll0" class="mui-scroll-wrapper">
							<div id="mescroll0" class="mui-scroll mescroll">
								<ul id="dataList0" style="padding:3px 10px 10px;">
									<li class="mui-table-view duiList duiList1"  @click="show1(aItem)" v-for="(aItem, aIndex) in dataList[0]">
										<div class="mui-media" style="padding:4px 11px;">
									        <a href="javascript:;" class="duiHua">
									           <div class="duihuaList">
									           		<span class="mui-media-object mui-pull-left leftSpan bg_red">{{aItem.YWNAME}}</span>
										            <div class="mui-media-body">
										               <div class="flex color_hei" style="min-height: 42px;position: relative;top: -1px;">
										                	<p class='duohang font13 color_hei' style='position: absolute;top: 50%;transform: translateY(-50%);'>{{aItem.TITLE}}</p>
										               </div>
										              <!-- <div class="flex color_hui symbol font11">
											           		<span class="color_hui">原1号： 豫环文</span>
											           		<span class="">来文时间： 2020.02.12  </span>
										        		</div> -->
										            </div>
									           </div>
									           <div class="flex color_hui unit">
										           	<span class="color_hui">
										           		<em class="iconfont icon_xiaoxi icon-bumen2 font16"></em>
										           		<em class="font11 color_hei">{{aItem.APPNAME}}</em>
										           	</span>
										           	<span class="color_red color_hui">
										           		<!-- <em class="font11" style="margin: 0 8px;">处长审核</em> -->
										           		<em class="font11 ">{{aItem.SENDTIME}}</em>
										           	</span>
									        	</div>
									        </a>
									    </div>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div  id="scroll0" class="mui-scroll-wrapper">
							<div id="mescroll1" class="mui-scroll mescroll">
								<ul id="dataList1" style="padding:3px 10px 10px;">
									<li class="mui-table-view duiList duiList1"  @click="show1(aItem)" v-for="(aItem, aIndex) in dataList[1]">
										<!-- <div class="mui-media" style="padding:4px 11px;">
									        <a href="javascript:;" class="duiHua">
									           <div class="duihuaList">
									           		<span class="mui-media-object mui-pull-left leftSpan bg_red">{{YWNAME.YWNAME}}</span>
										            <div class="mui-media-body">
										               <div class="flex color_hei" style="min-height: 42px;position: relative;top: -1px;">
										                	<p class='duohang font13 color_hei' style='position: absolute;top: 50%;transform: translateY(-50%);'>{{aItem.TITLE}}</p>
										               </div>
										            </div>
									           </div>
									           <div class="flex color_hui unit">
										           	<span class="color_hui">
										           		<em class="iconfont icon_xiaoxi icon-bumen2 font16"></em>
										           		<em class="font11 color_hei">{{aItem.APPNAME}}</em>
										           	</span>
										           	<span class="color_red color_hui">
										           		<em class="font11 ">{{aItem.SENDTIME}}</em>
										           	</span>
									        	</div>
									        </a>
									    </div> -->
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div id="item3mobile" class="mui-slider-item mui-control-content">
						<div  id="scroll2" class="mui-scroll-wrapper">
							<div id="mescroll2" class="mui-scroll mescroll">
								<ul id="dataList2" style="padding:3px 10px 10px;">
									<li class="mui-table-view duiList duiList1"  @click="show1(aItem)" v-for="(aItem, aIndex) in dataList[2]">
										<div class="mui-media" style="padding:4px 11px;">
									        <a href="javascript:;" class="duiHua">
									    	 	
									           <div class="duihuaList">
									           		<span class="mui-media-object mui-pull-left leftSpan bg_ju">{{aItem.YWNAME}}</span>
										            <div class="mui-media-body">
										               <div class="flex color_hei" style="min-height: 42px;position: relative;top: -1px;">
										                	<p class='duohang font13 color_hei' style='position: absolute;top: 50%;transform: translateY(-50%);'>{{aItem.TITLE}}</p>
										               </div>
														<!-- <div class="flex color_hui symbol font11">
											           		<span class="color_hui">原1号： 豫环文</span>
											           		<span class="">来文时间： 2020.02.12  </span>
										        		</div> -->
										            </div>
									           </div>
									           <div class="flex color_hui unit">
										           	<span class="color_hui">
										           		<em class="iconfont icon_xiaoxi icon-bumen2 font16"></em>
										           		<em class="font11 color_hei">{{aItem.APPNAME}}</em>
										           	</span>
										           	<span class="color_red color_hui">
										           		<!-- <em class="font11" style="margin: 0 8px;">{{aItem.TITLE}}</em> -->
										           		<em class="font11 ">{{aItem.SENDTIME}}</em>
										           	</span>
									        	</div>
									        </a>
									    </div>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div id="item4mobile" class="mui-slider-item mui-control-content">
						<div  id="scroll3" class="mui-scroll-wrapper">
							<div id="mescroll3" class="mui-scroll mescroll">
								<ul id="dataList3" style="padding:3px 10px 10px;">
									<li class="mui-table-view duiList duiList1"  @click="show1(aItem)" v-for="(aItem, aIndex) in dataList[3]">
										<div class="mui-media" style="padding:4px 11px;">
									        <a href="javascript:;" class="duiHua">
									    	 	
									           <div class="duihuaList">
									           		<span class="mui-media-object mui-pull-left leftSpan bg_ju">{{aItem.YWNAME}}</span>
										            <div class="mui-media-body">
										               <div class="flex color_hei" style="min-height: 42px;position: relative;top: -1px;">
										                	<p class='duohang font13 color_hei' style='position: absolute;top: 50%;transform: translateY(-50%);'>{{aItem.TITLE}}</p>
										               </div>
														<!-- <div class="flex color_hui symbol font11">
											           		<span class="color_hui">原1号： 豫环文</span>
											           		<span class="">来文时间： 2020.02.12  </span>
										        		</div> -->
										            </div>
									           </div>
									           <div class="flex color_hui unit">
										           	<span class="color_hui">
										           		<em class="iconfont icon_xiaoxi icon-bumen2 font16"></em>
										           		<em class="font11 color_hei">{{aItem.APPNAME}}</em>
										           	</span>
										           	<span class="color_red color_hui">
										           		<!-- <em class="font11" style="margin: 0 8px;">{{aItem.TITLE}}</em> -->
										           		<em class="font11 ">{{aItem.SENDTIME}}</em>
										           	</span>
									        	</div>
									        </a>
									    </div>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div id="item5mobile" class="mui-slider-item mui-control-content">
						<div  id="scroll4" class="mui-scroll-wrapper">
							<div id="mescroll4" class="mui-scroll mescroll">
								<ul id="dataList4" style="padding:3px 10px 10px;">
									<li class="mui-table-view duiList duiList1"  @click="show1(aItem)" v-for="(aItem, aIndex) in dataList[4]">
										<div class="mui-media" style="padding:4px 11px;">
									        <a href="javascript:;" class="duiHua">
									    	 	
									           <div class="duihuaList">
									           		<span class="mui-media-object mui-pull-left leftSpan bg_ju">{{aItem.YWNAME}}</span>
										            <div class="mui-media-body">
										               <div class="flex color_hei" style="min-height: 42px;position: relative;top: -1px;">
										                	<p class='duohang font13 color_hei' style='position: absolute;top: 50%;transform: translateY(-50%);'>{{aItem.TITLE}}</p>
										               </div>
														<!-- <div class="flex color_hui symbol font11">
											           		<span class="color_hui">原1号： 豫环文</span>
											           		<span class="">来文时间： 2020.02.12  </span>
										        		</div> -->
										            </div>
									           </div>
									           <div class="flex color_hui unit">
										           	<span class="color_hui">
										           		<em class="iconfont icon_xiaoxi icon-bumen2 font16"></em>
										           		<em class="font11 color_hei">{{aItem.APPNAME}}</em>
										           	</span>
										           	<span class="color_red color_hui">
										           		<!-- <em class="font11" style="margin: 0 8px;">{{aItem.TITLE}}</em> -->
										           		<em class="font11 ">{{aItem.SENDTIME}}</em>
										           	</span>
									        	</div>
									        </a>
									    </div>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
	</body>
	
	<script>
		mui.init({
			swipeBack: true //启用右滑关闭功能
		});
		
		//     ****************上拉加载下拉刷新开始***********************
			 //创建vue对象
			var vm = new Vue({
				el: "#slider",
				data: {
					curNavIndex:0, //全部0; 办公系统1; 代表履职2，电子阅文3，预算联网4
					mescrollArr:null,
					dataList:[],
					pageSize: 10,//每页条数
					total:0,//总数
					PamsearQuery:"OR#",
					newUnid:''
				},
				created:function(){
				
				},
				
				mounted: function() {
					var self = this;
					self.mescrollArr = new Array(5); 
					self.mescrollArr[0] = self.initMescroll("mescroll0","dataList0");//初始化待办
					
					/*初始化轮播*/
					document.querySelector('.mui-slider').addEventListener('slide', function(event) {
						//注意slideNumber是从0开始的；
						var i = event.detail.slideNumber;
						self.changePage(i);
					});
				},
				methods: {
					listNew(newUnid){
						this.newUnid = newUnid;
						mui.openWindow({
							url: 'dahuixiangqing.html',
							id: 'dahuixiangqing.html',
							extras:{
								newUnid: newUnid,
								newId:'xinwen'
							},
							waiting: {
								autoShow: false
							}
						})
						
					},
					/*切换列表*/
					changePage:function(i){
						var self = this;
						i= Number(i);
						if(self.curNavIndex != i) {
							//隐藏当前回到顶部按钮
							self.mescrollArr[self.curNavIndex].hideTopBtn();
							//取出菜单所对应的mescroll对象,如果未初始化则初始化
							if(self.mescrollArr[i] == null) {
								self.mescrollArr[i] = self.initMescroll("mescroll" + i,"dataList"+i);
							} else {
								//检查是否需要显示回到到顶按钮
								var curMescroll = self.mescrollArr[i];
								var curScrollTop = curMescroll.getScrollTop();
								if(curScrollTop >= curMescroll.optUp.toTop.offset) {
									curMescroll.showTopBtn();
								} else {
									curMescroll.hideTopBtn();
								}
							}
							//更新标记
							self.curNavIndex = i;
						}
					},
					initMescroll:function (mescrollId,warpId) {
						var self = this;
						//创建MeScroll对象,内部已默认开启下拉刷新,自动执行up.callback,刷新列表数据;
						var mescroll = new MeScroll(mescrollId, {
							//上拉加载的配置项
							up: {
								callback: self.upCallback, //上拉回调,此处可简写; 相当于 callback: function (page) { getListData(page); }
								isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
								noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
								empty: {
									warpId:warpId,
									icon: "image/wushuju.png",
									tip : "暂无文件" , 
								},
								toTop: { //配置回到顶部按钮
									 src: "option/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
									//offset : 1000
								},
								lazyLoad: {
									use: true // 是否开启懒加载,默认false
								}
							},
						  //下拉刷新配置
							down: {
								auto: false, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
								autoShowLoading: true, //如果在初始化完毕之后自动执行下拉回调,是否显示下拉刷新进度; 默认false. (需配置down的callback才生效)
								callback: self.downCallback
							}
							
						});
						return mescroll;
					},
					//上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
					upCallback: function(page) {
						//联网加载数据
						var self = this;
						getListDataFromNet(self.curNavIndex,(page.num-1)*page.size, page.size,self.PamsearQuery, function(curPageData,getCmsInfoCount) {
							while(self.dataList.length < self.curNavIndex){
								self.dataList.push([]);
							}
							if(self.dataList[self.curNavIndex] === undefined){
								self.dataList.push(curPageData);
							}else{
								for(var i=0 ; i<curPageData.length ; i++ ){
									self.dataList[self.curNavIndex].push(curPageData[i]);
								}
							}
							self.mescrollArr[self.curNavIndex].endBySize(curPageData.length, getCmsInfoCount); //必传参数(当前页的数据个数, 总数据量)
						
						}, function() {
							//联网失败的回调,隐藏下拉刷新和上拉加载的状态;
							self.mescrollArr[self.curNavIndex].endErr();
						});
					},
					downCallback:function(){
						//下拉刷新的回调
						var self = this;
						self.dataList[self.curNavIndex].splice(0,self.dataList[self.curNavIndex].length);//清空数据
						self.mescrollArr[self.curNavIndex].resetUpScroll();
					},
					show:function(todounid, type) {
						if(type == 'quanbu'){
							opentodoReader(todounid);
						}else{
							opentodo(todounid);
						}
					}
				},
			});
			
			
			
			/*联网加载列表数据
			 请忽略getListDataFromNet的逻辑,这里仅仅是在本地模拟分页数据,本地演示用
			 实际项目以您服务器接口返回的数据为准,无需本地处理分页.
			 * */
			function getListDataFromNet(curNavIndex,pageIndex,pageSize,PamsearQuery,successCallback,errorCallback) {
				//全部0; 办公系统1; 代表履职2，电子阅文3，预算联网4
				var res = {};
				console.log(basePath + 'commonweb.action?method=page&formid=Jff4d81d570f4700a1dea75941c4ab35&returnView=jsonView&appId=')
				if(curNavIndex == 0) {
					$.ajax({
						type: 'get',
						url: basePath + 'commonweb.action?method=page&formid=Jff4d81d570f4700a1dea75941c4ab35&returnView=jsonView',
						dataType: "json",
						data: {
							startIndex:pageIndex,
							pageSize:pageSize,
							PamsearQuery:PamsearQuery
						},
						success: function(data) {
							console.log(data.wdsclist.items)
							res = data.wdsclist.items;
							// console.log(res)
							successCallback(res, res.totalCount);
						}
					})
				} else if(curNavIndex == 1) {
					$.ajax({
						type: 'get',
						url: basePath + 'commonweb.action?formid=J50a06bb7002421e8351e65ad115ac9b&returnView=jsonView',
						dataType: "json",
						data: {
							startIndex:pageIndex,
							pageSize:pageSize,
							appId:'Jfa5f8744d4e48268b3619d5d82dd72b',
							PamsearQuery:PamsearQuery
						},
						success: function(data) {
							console.log(data.wdsclist.items)
							res = data.wdsclist.items;
							successCallback(res, res.totalCount);
						}
					})
				} else if(curNavIndex == 2) {
					$.ajax({
						type: 'get',
						url: basePath + 'commonweb.action?formid=J50a06bb7002421e8351e65ad115ac9b&returnView=jsonView',
						dataType: "json",
						data: {
							startIndex:pageIndex,
							pageSize:pageSize,
							appId:'J51cc1c44a984fd48661d18e7feb99cb',
							PamsearQuery:PamsearQuery
						},
						success: function(data) {
							console.log(data.wdsclist.items)
							res = data.wdsclist.items;
							// console.log(res)
							successCallback(res, res.totalCount);
						}
					})
					
				} else if(curNavIndex == 3) {
					
					$.ajax({
						type: 'get',
						url: basePath + 'commonweb.action?formid=J50a06bb7002421e8351e65ad115ac9b&returnView=jsonView',
						dataType: "json",
						data: {
							startIndex:pageIndex,
							pageSize:pageSize,
							appId:'Je3323e80abc4159a0064501b539f120',
							PamsearQuery:PamsearQuery
						},
						success: function(data) {
							console.log(data.wdsclist.items)
							res = data.wdsclist.items;
							// console.log(res)
							successCallback(res, res.totalCount);
						}
					})
				} else if(curNavIndex == 4) {
					$.ajax({
						type: 'get',
						url: basePath + 'commonweb.action?formid=J50a06bb7002421e8351e65ad115ac9b&returnView=jsonView',
						dataType: "json",
						data: {
							startIndex:pageIndex,
							pageSize:pageSize,
							appId:'Jddc55358eb249c18e2fc4b3a758b92f',
							PamsearQuery:PamsearQuery
						},
						success: function(data) {
							console.log(data.wdsclist.items)
							res = data.wdsclist.items;
							// console.log(res)
							successCallback(res, res.totalCount);
						}
					})
					
				}
				
			}
			
			
			function show1(data){
				var data = data;
				var dbAddRess = data.WEBADDRESS;
				console.log(dbAddRess)
				if(dbAddRess == 'http://124.115.170.45:8089/dzyw/'){
					// 电子阅文
					// var dzywUrl = 'http://125.76.228.117:8090/dist_ye';  125
					var dzywUrl = dbAddRess + 'dzywapp/'; // 放到服务器 124
				}else if(dbAddRess == 'http://124.115.170.45:8089/lz/'){
					// 履职
					// var sxlzUrl = 'lvzhi/index.html?token=' + userToken; 本地
					var sxlzUrl =  dbAddRess + 'vue?token=' + userToken;
				}
				var srcUnid = data.SRCUNID;
				if(data.YWLX2 == '建议办理'){
					// 查询建议字段
					$.ajax({
						type: 'get',
						url: dbAddRess  + 'commonweb.action?method=page&formid=J337094d9f75440dbefdda30f84acb0e&returnView=jsonView&unid=' + srcUnid +'&token=' + userToken,
						dataType: "json",
						success: function(data) {
							var option = data.formlist.items[0];
							console.log(option)
							var title = '建议列表';
							var titleName = option.jytm;
							var unid = option.unid;
							var jyzt = option.jyzt;
							var jybh = option.jybh;
							var jydb = option.jydb;
							var jydbunid = option.jydbunid;
							var jylx = option.jylx;
							console.log(jylx)
							var jcunid = option.jcunid;
							// 建议办理
							mui.openWindow({
								url: sxlzUrl + '/#/lzProposalDetails?token=' + userToken + '&title='+ title +'&titleName='+ titleName +'&unid='+ unid +'&jyzt='+ jyzt +'&jybh='+ jybh +'&jydb='+ jydb +'&jydbunid='+ jydbunid  +'&jcunid='+ jcunid +'&jylx='+ jylx + '&back=back',
								id: '',
								extras:{
									
								},
								createNew: true,
								waiting: {
									autoShow: true
								}
							});
						},
						error:function(error){
							
						}
					})
					
				}else if(data.YWLX2 == '履职活动'){
					// 履职活动
					mui.openWindow({
						url: sxlzUrl + '/#/lzMyForm?token=' + userToken + '&unid='+ srcUnid +'&back=back',
						id: '',
						extras:{
							
						},
						createNew: true,
						waiting: {
							autoShow: true
						}
					});
				}else if(data.YWLX2 == '代表信息'){
					// 代表信息
					// mui.openWindow({
					// 	url: sxlzUrl + '/#/lzPerforDuties?title=%E5%B1%A5%E8%81%8C%E6%B4%BB%E5%8A%A8&back=back',
					// 	id: '',
					// 	createNew: true,
					// 	waiting: {
					// 		autoShow: true
					// 	}
					// });
				}else if(data.YWLX1 == '活动信息'){
					// 活动信息
					// mui.openWindow({
					// 	url: sxlzUrl + '/#/SecondPages/MsgDetail?unid=J96efaa19e524ccfaa76ab6f1bdb5561&type=hdxx',
					// 	id: '',
					// 	createNew: true,
					// 	waiting: {
					// 		autoShow: true
					// 	}
					// });
				}else if(data.YWLX2 == '会议通知'){
					// 会议通知
					mui.openWindow({
						url: dzywUrl + 'huiyixiangqing.html?token=' + userToken + '&unid=' + srcUnid,
						id: '',
						createNew: true,
						waiting: {
							autoShow: true
						},
					});
				} 
			}
			
			// //搜索
			document.getElementById("search").addEventListener('input', function() {
				var keyword = ($(this).val());
				var PamsearQuery = "OR#";
				if (keyword != '' && keyword != null) {
					vm.dataList[vm.curNavIndex].splice(0,vm.dataList[vm.curNavIndex].length);//清空列表数据
					PamsearQuery += "title|"+keyword+"|like#";
					// console.log(PamsearQuery);
					vm.PamsearQuery = PamsearQuery;
					vm.mescrollArr[vm.curNavIndex].resetUpScroll();
				} else {
					vm.dataList[vm.curNavIndex].splice(0,vm.dataList[vm.curNavIndex].length);//清空列表数据
					vm.PamsearQuery = "OR#";
					vm.mescrollArr[vm.curNavIndex].resetUpScroll();
				}
			});
			//点击搜索按钮
			$("#search").on('keypress', function(e) {
				var id = 'dataList' + vm.curNavIndex;
				var keycode = e.keyCode;
				var keyword = ($(this).val());
				var PamsearQuery = "OR#";
				if(keycode == '13') {
					vm.dataList[vm.curNavIndex].splice(0,vm.dataList[vm.curNavIndex].length);//清空列表数据
					PamsearQuery += "title|"+keyword+"|like#";
					vm.PamsearQuery = PamsearQuery;
					vm.mescrollArr[vm.curNavIndex].resetUpScroll();
				} 
			});
			
			//点击输入框的X
			mui(".mui-input-clear")[0].addEventListener('focus', function() {
				mui(".mui-icon-clear")[0].addEventListener('tap', function() {
					vm.dataList[vm.curNavIndex].splice(0,vm.dataList[vm.curNavIndex].length);//清空列表数据
					vm.PamsearQuery = "OR#";
					vm.mescrollArr[vm.curNavIndex].resetUpScroll();
				});
			});
			
		//		****************上拉加载下拉刷新结束***********************
	</script>
</html>

mescroll 单标签的上拉加载下拉刷新以及搜索

<!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" />
		<meta name="screen-orientation" content="portrait" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<meta name="full-screen" content="yes">
		<meta name="x5-fullscreen" content="true">
		<title>待办</title>
		<!--公共样式-->	
		<script src="js/config.js"></script>
		<script src="js/common.js"></script>
	    <link rel="stylesheet" href="css/mui.min.css" />
	    <link rel="stylesheet" href="css/common.css" />
	    <link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
		<!--字体大小,背景色-->
		<link rel="stylesheet" type="text/css" href="switch/font_size/medium.css"/>
		<link rel="stylesheet" href="switch/skin/skin_0.css" />
		<!--引入样式-->
		<link rel="stylesheet" href="css/tongYong-logo.css" />
		<link rel="stylesheet" href="option/mescroll.min.css" />
		<link rel="stylesheet" href="switch/skin/skin_0.css" id="skin" />
		<!--动态加载字体大小以及样式-->
		<script type="text/javascript" charset="utf-8">
			var font_size = window.localStorage.getItem("font_size");
			loadStyle('switch/font_size/' + font_size + '.css');
		</script>
		<script src="js/mui.min.js"></script>
		<script src="js/jquery-3.1.0.min.js"></script>
		<script src="js/swiper.min.js"></script>
		<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
		<!--字体 北京 颜色 切换js-->
		<script src="js/switch.js"></script>
		<script src="js/cookieSkin.js"></script>
		<script src="option/mescroll.min.js"></script>
		<script src="js/vue/vue.min.js"></script>
		<style type="text/css">
			.mui-segmented-control.mui-scroll-wrapper {
			    height: 40px;
			}
			.mui-segmented-control .mui-control-item{
				height: 40px;
				line-height: 40px;
			}
			.mui-bar-nav.mui-bar .mui-icon.sousuo {
			     margin-right: 0; 
			}
			.mui-ellipsis {
				min-height: 21px;
			}
			.mui-segmented-control.mui-scroll-wrapper .mui-control-item{
				padding: 0 30px;
			}
			.mui-scroll-wrapper {
			    overflow-y: auto;
			}
			.loading{
				display: none;
				width: 5rem;
				margin: 43% auto;
				text-align: center;
				font-size: .8rem;
				color: #9e9e9e;
			}
			.loading img{
				width: 2.1rem!important;
			}
			.mui-segmented-control.mui-scroll-wrapper .mui-control-item {
			    padding: 0 30px;
			}
			.mui-input-row {
			    position: relative;
			    top: -42px;
			}
			.header_search {
			    width: 80%;
			    position: absolute;
			    left: 54%;
			    transform: translateX(-50%);
			    top: 3px;
			}
			.unit{
				margin-top: 3px;
			}
			.symbol{
				line-height: 14px;
				margin-top: 5px;
			}
			.duihuaList {
			    padding: 10px 0 5px;
			}
			.symbol span{
				display: inline-block;
			}
			.flexStar {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
			}
			.mui-slider .mui-slider-group .mui-slider-item img.empty-icon {
			    width: 40%;
			    position: relative;
			    top: 40%;
			    margin-top: 38%;
			}
			.color_hui {
			    color: #979797;
			}
			.bg_red {
			    background: #f67562;
			}
			.bg_lan {
			    background: #0177d7;
			}
			.bg_zi{
				background: #c197fd!important;;
			}
			.bg_ju{
				background: #fbbb4e!important;;
			}
			.bg_lv{
				background: #10dbba!important;;
			}
			.bg_qlv{
				background: #66d6ab!important;;
			}
			.bg_qred{
				background: #e76556!important;;
			}
			.bg_jured{
				background: #f1845b!important;;
			}
			.bg_szi{
				background: #de4af2!important;;
			}
			.color_hei {
			    color: #333;
			}
			.mui-table-view .mui-media-object {
			    line-height: 36px!important;
			    width: 55px!important;
			    max-width: 55px!important;
			    height: 36px!important;
				border-radius: 3px!important;
			}
			.zwsj{
				display: none;
				text-align: center;
				margin: auto;
			}
			
		</style>
	</head>
	<body class="mui-plus mui-statusbar mui-statusbar-offset">
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <div class="mui-input-row mui-search header_search">
				<input type="search" id="search"  class="mui-input-clear font13" placeholder="请输入标题">
			</div>
		</header>
		<div class="mui-content" id="slider">
			<div class="mui-slider mui-fullscreen">
				<div id="scroll1" class="mui-scroll-wrapper">
					<div id="mescroll0" class="mui-scroll mescroll">
						<ul id="dataList0" style="padding:3px 10px 10px;">
							<li class="mui-table-view duiList duiList1" @click="show1(aItem)" v-for="(aItem, aIndex) in dataList">
								<div class="mui-media" style="padding:4px 11px;">
							        <a href="javascript:;" class="duiHua">
							           <div class="duihuaList">
							           		<span class="mui-media-object mui-pull-left leftSpan bg_red">{{aItem.YWLX1}}</span>
								            <div class="mui-media-body">
								               <div class="flex color_hei" style="min-height: 42px;position: relative;top: -1px;">
								                	<p class='duohang font13 color_hei' style='position: absolute;top: 50%;transform: translateY(-50%);'>{{aItem.title}}</p>
								               </div>
								            </div>
							           </div>
							           <div class="flex color_hui unit">
								           	<span class="color_hui">
								           		<em class="iconfont icon_xiaoxi icon-bumen2 font16"></em>
								           		<em class="font11 color_hei">{{aItem.APPNAME}}{{aItem.YWLX2}}</em>
								           	</span>
								           	<span class="color_red color_hui">
								           		<em class="font11" style="margin: 0 8px;">{{aItem.todonodename}}</em>
								           		<em class="font11 ">{{aItem.CREATETIME}}</em>
								           	</span>
							        	</div>
							        </a>
							    </div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		
	</body>
	
	<script>
		mui.init({
			swipeBack:true //启用右滑关闭功能
		});
		var userToken = window.localStorage.getItem("userToken");
		//     ****************上拉加载下拉刷新开始***********************
			 //创建vue对象
			var vm = new Vue({
				el: "#slider",
				data: {
					curNavIndex:0, //领导动态0;
					mescrollArr:null,
					dataList:[[]],
					pageSize: 3,//每页条数
					total:0,//总数
					PamsearQuery:"OR#",
					newUnid:''
				},
				created:function(){
				},
				mounted: function() {
					var self = this;
					self.mescrollArr = new Array(1); 
					self.mescrollArr[0] = self.initMescroll("mescroll0","dataList0");//初始化待办
				},
				methods: {
					initMescroll:function (mescrollId,warpId) {
						var self = this;
						//创建MeScroll对象,内部已默认开启下拉刷新,自动执行up.callback,刷新列表数据;
						var mescroll = new MeScroll(mescrollId, {
							//上拉加载的配置项
							up: {
								callback: self.upCallback, //上拉回调,此处可简写; 相当于 callback: function (page) { getListData(page); }
								isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
								noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
								empty: {
									warpId:warpId,
									icon: "image/wushuju.png",
									tip : "暂无文件" , 
								},
								toTop: { //配置回到顶部按钮
									 src: "option/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
									//offset : 1000
								},
								lazyLoad: {
									use: true // 是否开启懒加载,默认false
								}
							},
						  //下拉刷新配置
							down: {
								auto: false, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
								autoShowLoading: true, //如果在初始化完毕之后自动执行下拉回调,是否显示下拉刷新进度; 默认false. (需配置down的callback才生效)
								callback: self.downCallback
							}
							
						});
						return mescroll;
					},
					//上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
					upCallback: function(page) {
						//联网加载数据
						var self = this;
						getListDataFromNet(self.curNavIndex,(page.num-1)*page.size, page.size,self.PamsearQuery, function(curPageData,totalCount) {
							if (page.num == 1) self.dataList = [];
							//更新列表数据
							self.dataList = self.dataList.concat(curPageData);
							//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
							self.mescrollArr[self.curNavIndex].endBySize(curPageData.length, totalCount); //必传参数(当前页的数据个数, 总数据量)
						
						}, function() {
							//联网失败的回调,隐藏下拉刷新和上拉加载的状态;
							self.mescrollArr[self.curNavIndex].endErr();
						});
					},
					downCallback:function(){
						//下拉刷新的回调
						var self = this;
						self.dataList.splice(0,self.dataList.length);//清空数据
						self.mescrollArr[self.curNavIndex].resetUpScroll();
					},
					show:function(todounid, type) {
						if(type == 'quanbu'){
							opentodoReader(todounid);
						}else{
							opentodo(todounid);
						}
					}
				},
			});
			
			// 获取页面
			var dbInfo= getParams("dbInfo");
			console.log(dbInfo);
			var formid = '';
			if(dbInfo == 'db'){
				// 代办列表
				formid = 'J8cd2b6dd8f0445d80f5466cd66af381'
			}else if(dbInfo == 'yb'){
				// 已办列表
				formid = 'Ja3c10463f9140ae86e80cef6a8dfeef'
			}else if(dbInfo == 'dy'){
				// 待阅列表
				formid = 'J4f2a158eeeb41ffaff864366b16c1ef'
			}else if(dbInfo == 'yy'){
				// 已阅列表
				formid = 'Je40300ece724b8086d8d38d4dd1c33c'
			}else if(dbInfo == 'qq'){
				// 我都请求
				formid = 'J5c87e3bae0040c690c02f4582934244'
			}
			//获取传过来的值
			function getParams(key) {
				var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
				var r = window.location.search.substr(1).match(reg);
				if (r != null) {
					return unescape(r[2]);
				}
				return null;
			};
			
			/*联网加载列表数据
			 请忽略getListDataFromNet的逻辑,这里仅仅是在本地模拟分页数据,本地演示用
			 实际项目以您服务器接口返回的数据为准,无需本地处理分页.
			 * */
			function getListDataFromNet(curNavIndex,pageIndex,pageSize,PamsearQuery,successCallback,errorCallback) {
				//领导动态0; 领导讲话1;通知2，公告3，党组会4，工作报告5，决议决定6, 任免名单7, 扶贫工作8，机关建设9
				vm.dataList.splice(0,vm.dataList.length);//清空列表数据
				var res = {};
				if(curNavIndex == 0) {
					$.ajax({
						type: 'get',
						url: basePath + 'commonweb.action?formid='+ formid +'&returnView=jsonView',
						dataType: "json",
						data: {
							startIndex:pageIndex,
							pageSize:pageSize,
							PamsearQuery:PamsearQuery
						},
						success: function(data) {
							res = data.formlist.items;
							console.log(res)
							for(var i =0; i < res.length;i++){
								console.log(res[i])
								res[i].CREATETIME = res[i].CREATETIME.substring(0,16);
							}
							successCallback(res, res.totalCount);
						}
					})
				}
				
			}
			function show1(data){
				var data = data;
				var dbAddRess = data.WEBADDRESS;
				console.log(dbAddRess)
				if(dbAddRess == 'http://124.115.170.45:8089/dzyw/'){
					// 电子阅文
					// var dzywUrl = 'http://125.76.228.117:8090/dist_ye';  125
					var dzywUrl = dbAddRess + 'dzywapp/'; // 放到服务器 124
				}else if(dbAddRess == 'http://124.115.170.45:8089/lz/'){
					// 履职
					// var sxlzUrl = 'lvzhi/index.html?token=' + userToken; 本地
					var sxlzUrl =  dbAddRess + 'vue?token=' + userToken;
				}
				var srcUnid = data.SRCUNID;
				if(data.YWLX2 == '建议办理'){
					// 查询建议字段
					$.ajax({
						type: 'get',
						url: dbAddRess  + 'commonweb.action?method=page&formid=J337094d9f75440dbefdda30f84acb0e&returnView=jsonView&unid=' + srcUnid +'&token=' + userToken,
						dataType: "json",
						success: function(data) {
							var option = data.formlist.items[0];
							console.log(option)
							var title = '建议列表';
							var titleName = option.jytm;
							var unid = option.unid;
							var jyzt = option.jyzt;
							var jybh = option.jybh;
							var jydb = option.jydb;
							var jydbunid = option.jydbunid;
							var jylx = option.jylx;
							console.log(jylx)
							var jcunid = option.jcunid;
							// 建议办理
							mui.openWindow({
								url: sxlzUrl + '/#/lzProposalDetails?token=' + userToken + '&title='+ title +'&titleName='+ titleName +'&unid='+ unid +'&jyzt='+ jyzt +'&jybh='+ jybh +'&jydb='+ jydb +'&jydbunid='+ jydbunid  +'&jcunid='+ jcunid +'&jylx='+ jylx + '&back=back',
								id: '',
								extras:{
									
								},
								createNew: true,
								waiting: {
									autoShow: true
								}
							});
						},
						error:function(error){
							
						}
					})
					
				}else if(data.YWLX2 == '履职活动'){
					// 履职活动
					mui.openWindow({
						url: sxlzUrl + '/#/lzMyForm?token=' + userToken + '&unid='+ srcUnid +'&back=back',
						id: '',
						extras:{
							
						},
						createNew: true,
						waiting: {
							autoShow: true
						}
					});
				}else if(data.YWLX2 == '代表信息'){
					// 代表信息
					// mui.openWindow({
					// 	url: sxlzUrl + '/#/lzPerforDuties?title=%E5%B1%A5%E8%81%8C%E6%B4%BB%E5%8A%A8&back=back',
					// 	id: '',
					// 	createNew: true,
					// 	waiting: {
					// 		autoShow: true
					// 	}
					// });
				}else if(data.YWLX1 == '活动信息'){
					// 活动信息
					// mui.openWindow({
					// 	url: sxlzUrl + '/#/SecondPages/MsgDetail?unid=J96efaa19e524ccfaa76ab6f1bdb5561&type=hdxx',
					// 	id: '',
					// 	createNew: true,
					// 	waiting: {
					// 		autoShow: true
					// 	}
					// });
				}else if(data.YWLX2 == '会议通知'){
					// 会议通知
					mui.openWindow({
						url: dzywUrl + 'huiyixiangqing.html?token=' + userToken + '&unid=' + srcUnid,
						id: '',
						createNew: true,
						waiting: {
							autoShow: true
						},
					});
				} 
			}
			//输入搜索
			document.getElementById("search").addEventListener('input', function() {
				var keyword = ($(this).val());
				var PamsearQuery = "OR#";
				if (keyword != '' && keyword != null) {
					vm.dataList.splice(0,vm.dataList.length);//清空列表数据
					PamsearQuery += "title|"+keyword+"|like#";
					console.log(PamsearQuery);
					vm.PamsearQuery = PamsearQuery;
					vm.mescrollArr[vm.curNavIndex].resetUpScroll();
				} else {
					vm.dataList.splice(0,vm.dataList.length);//清空列表数据
					vm.PamsearQuery = "OR#";
					vm.mescrollArr[vm.curNavIndex].resetUpScroll();
				}
				
			});
			//点击搜索按钮
			$("#search").on('keypress', function(e) {
				var id = 'dataList' + vm.curNavIndex;
				var keycode = e.keyCode;
				var keyword = ($(this).val());
				var PamsearQuery = "OR#";
				if(keycode == '13') { // 回车键
					vm.dataList.splice(0,vm.dataList.length);//清空列表数据
					PamsearQuery += "title|"+keyword+"|like#";
					vm.PamsearQuery = PamsearQuery;
					vm.mescrollArr[vm.curNavIndex].resetUpScroll();
				} 
			});
			
			//点击输入框的X
			mui(".mui-input-clear")[0].addEventListener('focus', function() {
				mui(".mui-icon-clear")[0].addEventListener('tap', function() {
					vm.dataList.splice(0,vm.dataList.length);//清空列表数据
					vm.PamsearQuery = "OR#";
					vm.mescrollArr[vm.curNavIndex].resetUpScroll();
				});
			});
			
		//		****************上拉加载下拉刷新结束***********************
	</script>
</html>