首先安装mint-ui组件库npminstallmint-ui在main.js中引入mint-ui和stylesimport'mint-ui/lib/style.css'importMintUifrom'mint-ui'Vue.use(MintUi)and然后在模板template中引入lodeMoreimport{Loadmore}from'mint-ui'如下：="loadmore":auto-fill="false":bottomDistance='bottomDistance'>
{{item.sum}}（总奖励）{{item.time|formatDate}}
js代码如下：data(){return{pagesize:1,//pagepageval:5,//页数每次请求allLoaded:false,//是否加载后haveMore:true,//是否有更多数据}},created(){this.loaddata();},方法:{loadBottom:有趣ction(){//上拉加载更多this.more();this.$refs.loadmore.onBottomLoaded();},loadTop:function(){//下拉刷新this.pagesize=1;这个.loaddata();this.$refs.loadmore.onTopLoaded();},more(){//分页查询this.pagesize++;this.loaddata()this.isHaveMore(this.haveMore)},loaddata(){//加载数据从vuex获取数据this.$store.dispatch('managementAwardListDetail/getmanagerlistDetail',[this.timer,this.pagesize]).then(()=>{if(this.$store.state.managementAwardListDetail.code==200){if(this.pagesize==1){this.list=this.$store.state.managementAwardListDetail.list;}else{this.list=this.list.conc在（这个。$store.state.managementAwardListDetail.list）；如果（this.$store.state.managementAwardListDetail.list.length==this.pageval）{this.haveMore=true;}else{this.haveMore=false;}}}else{this.$toast({message:this.$store.state.managementAwardListDetail.msg,});}}).catch((e)=>{console.log(e);})},isHaveMore:function(){//是否有下一页，如果没有，禁止上拉刷新this.allLoaded=true//true是禁止上拉加载if(this.haveMore){this.allLoaded=false}}},css部分省略，大功告成！初学前端，高手请轻喷！
