1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62
| <script> import { Spinner } from 'mint-ui';
export default { data() { return { list: [], topStatus: '', bottomStatus: '', wrapperHeight: 0, allLoaded: false, } }, components: { 'mt-spinner': Spinner, 'mt-loadmore': Loadmore, }, methods: { handleTopChange(status) { console.log(status); this.topStatus = status; }, handleBottomChange(status) { console.log('handleBottomChange ', status); this.bottomStatus = status; }, loadTop() { console.log('loadTop'); setTimeout(() => { let firstValue = this.list[0]; for (let i = 1; i <= 10; i++) { this.list.unshift(firstValue - i); } this.$refs.loadmore.onTopLoaded(); console.log('load top end'); }, 2000); }, loadBottom() { setTimeout(() => { let lastValue = this.list[this.list.length - 1]; if (lastValue <= 60) { for (let i = 1; i <= 10; i++) { this.list.push(lastValue + i); } } else { this.allLoaded = true; } this.$refs.loadmore.onBottomLoaded(); console.log('loadBottom end, this.allLoaded = ', this.allLoaded); }, 1500); }, }, created() { for (let i = 0; i < 20; i++) { this.list.push(i); } }, mounted() { this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top; } } </script>
|