一个完整最少代码的上拉加载（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”），不加载。 如果不写的话，在手机端有问题，每上拉一次就会进行一次加载。