1. 先安装mint-ui
2. 在main.js中引入mint-ui的css样式和组件
import "mint-ui/lib/style.css"; import {Loadmore} from ‘mint-ui‘; Vue.component(Loadmore.name,Loadmore)
3. 使用loadmore组件
<template> <div class="page-loadmore"> <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore"> <ul > <li v-for="item in list" >{{ item }}</li> </ul> </mt-loadmore> </div> </template>
<script type="text/babel"> export default { data() { return { list: [],allLoaded: false,//数据是否加载完毕 }; },
methods: {
loadTop() {//上拉加载
this.$refs.loadmore.onTopLoaded(); }, loadBottom() {//下拉刷新
var vm = this; this.$refs.loadmore.onBottomloaded();
if(!vm.allloaded){
//调用接口(pageNum+1)
}else{
console.log(‘没有更多数据了‘)
} } },
}; </script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。