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部分省略了，这样就大功告成了！初学前端，大神请轻喷！

猜你喜欢