一个完整最少代码的上拉加载（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;
设定不能再上拉加载。加载完之后可以设这个属性。