<template> <div style="min-height:200px"> <mt-loadmore :top-method="loadTop" @top-status-change="handleTopChange" @bottom-status-change="handleBottomChange" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore"> <ul> <li v-for="(item,index) in list">[{{index}}]{{ item.text }}</li> </ul> <div slot="top" class="mint-loadmore-top"> <span v-show="topStatus !== ‘loading‘" :class="{ ‘rotate‘: topStatus === ‘drop‘ }">↓</span> <span v-show="topStatus === ‘loading‘">上拉加载中...</span> </div> <div slot="bottom" class="mint-loadmore-bottom"> <span v-show="bottomStatus !== ‘loading‘" :class="{ ‘rotate‘: topStatus === ‘drop‘ }">↑</span> <span v-show="bottomStatus === ‘loading‘">下拉加载中...</span> </div> </mt-loadmore> </div> </template> <script> import axios from ‘axios‘; import * as _global from ‘../../plugs/global‘; import TrendFun from ‘../../plugs/function‘; import BUS from ‘../../plugs/bus.js‘; import { Toast,Loadmore } from ‘mint-ui‘; let trendFun=new TrendFun(); //公共函数库 let __REQUEST=trendFun.__REQUEST(); let __URILIST=_global.default; export default { name: ‘app‘, data(){ return{ allLoaded:false, page:0, list: [ ] } }, created(){ //this.getList(); }, methods:{ handleTopChange:function(status) { this.topStatus = status; console.log("this.topStatus = status; "+ status); }, handleBottomChange:function(status) { this.bottomStatus = status; console.log("this.bottomStatus = status; "+ status); }, getList:function(page){ __REQUEST.bizParams={ "bankCardId":"" ,// 银行卡ID ----非必填,只有在专门查一个银行卡时传 "cardBizCode":"WITHOLDING",// 卡业务编码 默认卡(DEFAULT), 自动代扣卡(WITHOLDING) ----- 非必填,不填查所有的 "type":"" // 卡类型 0:查询所有卡 1:只查储蓄卡 2:只查信用卡 ----- 非必填 } let request=__REQUEST; axios.get(__URILIST[2], { params:request }) .then(response=>{ let res=response.data; //axios返回的数据是用response.data包括的,和jquery不一样 if(res.data){ let tmparry=[]; //console.log(res.data.debitList); res.data.msgList.map((e,i)=>{ if(e.msgType==1 && i<=3){ tmparry.push(e); } }); this.list = this.list.concat(tmparry); //this.list.push(tmparry); console.log(tmparry); } }) .catch(function (error) { console.log(error); }); }, loadTop:function(){ console.log(this.page); //默认是第三页,下拉刷新的时候获取第一页 //this.page=1; this.getList(this.page); this.$refs.loadmore.onTopLoaded(); //手动调用,组件定位 this.$refs.loadmore.onBottomLoaded(); console.log("上拉执行"); }, loadMore:function(){ console.log("loadMore"); }, loadBottom:function() { console.log("下拉在执行"); this.page=this.page+1; console.log("this.page:"+this.page); this.getList(this.page); if(this.page==20){ this.allLoaded=true; //当所有数据 全部读取完成的时候 停止下拉读取数据 //this.$refs.loadmore.onBottomLoaded(); } } }, components: { } } </script>
时间: 2024-10-22 22:41:45