12345678910111213141516171819202122232425262728293031323334353637383940 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>vue-infinite-scroll</title>
- </head>
- <body>
- <div class="app"
- style="height: 1200px;background-color: #ccc;width: 400px;margin: 0 auto;"
- v-infinite-scroll="loadMore"
- infinite-scroll-disabled="busy"
- infinite-scroll-distance="10">
- </div>
- <script src="https://cdn.css.net/libs/vue/2.0.3/vue.js"></script>
- <script src="../vue-infinite-scroll.js"></script>
- <script>
- var app = document.querySelector('.app')
- new Vue({
- el: app,
- data: function () {
- return {busy: false}
- },
- methods: {
- loadMore: function () {
- var self = this;
- self.busy = true;
- console.log('loading... ' + new Date());
- setTimeout(function () {
- var app = document.querySelector('.app')
- var height = app.clientHeight;
- app.style.height = height + 300 + 'px';
- console.log('end... ' + new Date());
- self.busy = false
- }, 1000)
- }
- }
- })
- </script>
- </body>
- </html>
|