mui&&vue的上拉加载更多

1. 首先，是vue的点击加载更多，使用Vue的组件实现，上代码

   <li v-if="dataRe.length>5" is='my-next-page' :is-more="reIsMore" v-on:getmore="getListMore('02')"></li>

2. 然后在commom.js中这样写，因为可以重复使用所以写在公共js中
   /*
    * 全局注册 翻页组件
    * li标签组件，使用is特性解析挂载
    * isMore: 是否可加载下一页，由父实例传值控制（新加载页长度<10不加载）
    * getmore：自定义方法，传入需触发的父实例方法
    * */
   if(typeof(Vue) != 'undefined' ){		//避免未引用vue时报错
   	Vue.component('my-next-page', {
   	  	template: '<li class="getListMore"><span class="red" v-if="isMore" @click="clickGetMore">点击加载更多...</span><span class="col-gray" v-else>我是有底线的</span></li>',
   	  	props:['isMore'],
   	  	methods:{
   	  		clickGetMore:function () {
   	  			this.$emit('getmore')
   	  		}
   	  	}
   	})
   }
   
   
   
   
   

3. 在对应的js中写对应的方法，点击加载更多的方法
   var vm = new Vue({
       el:"#app",
       data:{
           
       },
       methods:{
           getListMore:function(){
               //做ajax请求咯
           }
       }
   })
   
   
   
   
   

4. 然后的是Mui的上拉加载

5. <div class="mui-content" id="cardLost" v-cloak>
   			<div class="mui-scroll-wrapper" id="refreshContainer">
   				<div class="mui-scroll">
   					<ul class="mui-table-view cellTop10  mui-table-view-chevron" v-for="(data,index) in myData"> 
   				        <li class="mui-table-view-cell" @tap="openWin(data)">
   				            <a class="mui-navigate-right mui-media cardNum">
   				            		<img class="mui-media-object mui-pull-left" src="../../../img/my/creditcard.jpg"/>
   				            		<div class="mui-media-body">
   				            			<span>{{data.cardNbr | blurFormat}}</span>
   				            		</div>
   				            </a>
   				        </li>
   				        <div class="cardStat" v-html="data.cardStat" :class="{cardNormal:data.cardStat==='正常'}">
   				        </div>
   					 </ul>
   				</div>
   			</div>
   		</div>
   
   
   
   
   

6. var vm = new Vue({
   	el:"#cardLost",
   	data:{
   		myData:[]
   	},
   	created:function(){
   		var rtnInd = '';
   		var cardNbr='';
   		mui.init({
   			pullRefresh: {
   				container: '#refreshContainer',
   				up: {
   					auto: true,
   					contentrefresh: '正在加载...',
   					callback: function() {
   						var cardData = {
   							'custId':custId,
   							'keyType':'01',
   							'pinFlag':'0',
   							'rtnInd':'',
   							'cardNbr':''
   						};
   						if(rtnInd == '1') {//说明已有数据，目前处于下拉刷新
   							cardData.rtnInd = rtnInd;
   							cardData.cardNbr = cardNbr;
   						}
   						ICreditCard.post(URL.certQuery,cardData,'',function(res){
   							mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
   							var result = JSON.parse(res.result);
   							if(res.stateCode == "SUCCESS"){
   								var rdata = res.rdata;
   								var result = JSON.parse(res.rdata.A003008A);
   								vm.myData = result.list;
   								rtnInd = result.rtnInd;
   								cardNbr = result.list[result.list.length-1].cardNbr;
   							}else{
   								mui.alert(res.message,'提示','确定',function (e) {
   								},'div')
   							}
   						});//账户卡列表
   //						
   					}
   				}
   			}
   		})
   		
   	},
   	filters:{
   		blurFormat:filters.blurFormat
   	}
   })