一个完整最少代码的上拉加载(mint-ui的loadmore 和 vue)

首先给大家推荐一下我老师大神的人工智能教学网站。教学不仅零基础,通俗易懂,而且非常风趣幽默,还时不时有内涵黄段子!点这里可以跳转到网站

这是一个上拉加载的最减代码,其中上拉的数据加载你们自己弄,我这只做的一个演示。

html代码:

<div id="content">
    <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">
           <div class="item" v-for="data in list">
                <div class="name">{{data.name}}</div>
           </div>
    </mt-loadmore>
</div>

CSS代码:

<link rel="stylesheet" href="../assert/mint_ui/style.css"/>
    <style>
        #content{
            overflow: scroll;
        }
        .item{

        }
        .item .name{
            height: 200px;
            background-color: green;
            margin-bottom: 10px;
        }
    </style>

JavaScript的代码:

<script src="../assert/mint_ui/vue.js"></script>
<script src="../assert/mint_ui/index.js"></script>
<script>
    var p = 10;
    var vue = new Vue({
        el:"#content",
        data:{
            list:[],
            allLoaded:false
        },
        methods:{
            loadBottom: function(){
                this.$refs.loadmore.onBottomLoaded();
                this.getList();
            },
            getList: function(){
                var i = 0,list0 = [];
                for(i ; i < p;i ++){
                    list0.push({demo:i});
                }
                p+=10;
                this.list =  list0;
            }
        },
        mounted: function(){
            this.getList();
        }
    })
</script>

这段代码的缺点:每次只要你把它布置道浏览器上,必须先把JavaScript中的 allLoaded的值改为true,不然他会一直加载。(浏览器会一直调用loadBottom这个函数,而这个函数当allLoaded为false的时候就可以加载,所以要改值),然后跳到浏览器的开发者模式的手机模式,再把值改回来,就可以正常使用了。有点学艺不精啊,大家多指点下。
(allLoaded:为false时,说明你还没有加载完,可以继续加载;为true时,说明你已经加载完了,不能再继续加载

:auto-fill=”false” 意思是当你还没有滑到底部时(其实是与底部距离不超过最大:max-distance=”150”),不加载。 如果不写的话,在手机端有问题,每上拉一次就会进行一次加载。

this.allLoaded = true;
设定不能再上拉加载。加载完之后可以设这个属性。

点这里可以跳转到人工智能网站

发表评论