- 首先,是vue的点击加载更多,使用Vue的组件实现,上代码
<li v-if="dataRe.length>5" is='my-next-page' :is-more="reIsMore" v-on:getmore="getListMore('02')"></li>
然后在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') } } }) }
在对应的js中写对应的方法,点击加载更多的方法 var vm = new Vue({ el:"#app", data:{ }, methods:{ getListMore:function(){ //做ajax请求咯 } } })
然后的是Mui的上拉加载
<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>
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 } })
mui&&vue的上拉加载更多
最新推荐文章于 2023-12-06 16:32:47 发布