vue和mint-ui loadMore 实现上拉加载和下拉刷新
首先安装mint-ui组件库
npm install mint-ui
在main.js中引入mint-ui和样式
import 'mint-ui/lib/style.css'
import MintUi from 'mint-ui'
Vue.use(MintUi)
然后在组件中引入lodeMore
import {Loadmore} from 'mint-ui'
在template模板中写法如下:
<mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :auto-fill="false" :bottomDistance='bottomDistance'>
<ul>
<li v-for="(item,index) in list" v-bind:key="index">
<span class="user">{{item.sum}}<b>(总计奖励)</b></span>
<span class="time">{{item.time | formatDate}}</span>
</li>
</ul>
</mt-loadmore>
js代码如下:
data(){
return{
pagesize:1,//分页
pageval:5, //每次请求的个数
allLoaded:false,//是否加载完毕
haveMore: true, //是否有更多数据
}
},
created(){
this.loaddata();
},
methods:{
loadBottom: function(){//上拉加载更多
this.more();
this.$refs.loadmore.onBottomLoaded();
},
loadTop: function(){//下拉刷新
this.pagesize =1;
this.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.concat(this.$store.state.managementAwardListDetail.list);
if(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部分省略了,这样就大功告成了! 初学前端,大神请轻喷!