vue和mint-ui loadMore 實(shí)現(xiàn)上拉加載和下拉刷新

libin19890520 發(fā)布于2019-08-23 12:51 / 3131人閱讀

摘要：首先安裝組件庫(kù)在中引入和樣式然后在組件中引入在模板中寫法如下總計(jì)獎(jiǎng)勵(lì)代碼如下分頁(yè)每次請(qǐng)求的個(gè)數(shù)是否加載完畢是否有更多數(shù)據(jù)上拉加載更多下拉刷新分頁(yè)查詢加載數(shù)據(jù)從中拿數(shù)據(jù)是否還有下一頁(yè)，如果沒(méi)有就禁止上拉刷新是禁止

首先安裝mint-ui組件庫(kù)

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模板中寫法如下：

    
    
        
            {{item.sum}}(總計(jì)獎(jiǎng)勵(lì))
            {{item.time | formatDate}}

js代碼如下：

data(){
        return{
                pagesize:1,//分頁(yè)
                pageval:5, //每次請(qǐng)求的個(gè)數(shù)
                allLoaded:false,//是否加載完畢
                haveMore: true, //是否有更多數(shù)據(jù)
            }
        },
        created(){
            this.loaddata();
        },
        methods:{
            loadBottom: function(){//上拉加載更多
                 this.more();                 
                 this.$refs.loadmore.onBottomLoaded();
            },
            loadTop: function(){//下拉刷新
                this.pagesize =1;
                this.loaddata();               
                this.$refs.loadmore.onTopLoaded();
            },
            more() {
              // 分頁(yè)查詢
              this.pagesize ++;
              this.loaddata()
              this.isHaveMore(this.haveMore)
            },
            loaddata(){//加載數(shù)據(jù)從vuex中拿數(shù)據(jù)
                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 () {
              // 是否還有下一頁(yè)，如果沒(méi)有就禁止上拉刷新
              this.allLoaded = true // true是禁止上拉加載
              if (this.haveMore) {
                this.allLoaded = false
              }
            }
        },

css部分省略了，這樣就大功告成了！初學(xué)前端，大神請(qǐng)輕噴！