vue---mint-ui组件loadmore（上拉加载，下拉刷新）

1. 先安装mint-ui 2. 在main.js中引入mint-ui的css样式和组件 import "mint-ui/lib/style.css";import {Loadmore} from

... .

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>

. . .. ...