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部分省略了，這樣就大功告成了！ 初學前端，大神請輕噴！