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

最新推荐文章于 2025-01-21 14:56:57 发布

放错位的天才

最新推荐文章于 2025-01-21 14:56:57 发布

阅读量385

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ui ViewUI

原文链接：http://www.cnblogs.com/Super-scarlett/p/10722112.html

本文详细介绍了如何在Vue项目中安装并使用Mint-UI的Loadmore组件，实现上拉加载和下拉刷新功能。通过具体代码示例，展示了组件的配置和方法调用，帮助开发者快速掌握Loadmore组件的使用。

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('没有更多数据了')
　　　　　}
      }
      
  },