vue 滚动加载

 

?

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 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78

<template>   <div class="wraper" @scroll="onScroll($event)">     <div class="item" v-for="item in items">       {{item}}     </div>   </div> </template>   <script> export default {   data () {     return {       items:[],       pgSize:36,       rawItems:[],       pgNo:1     }   },      ready () {     for(var i=0;i<=1000;i++){       this.rawItems.push(i)     }     this.changePgItems()   },   methods:{     onScroll(event){       var offsetHeight = event.currentTarget.offsetHeight,       scrollHeight = event.target.scrollHeight,       scrollTop = event.target.scrollTop,       scrollBottom = offsetHeight + scrollTop       if(scrollTop===0)       {         if(this.pgNo===1)         {           return         }         this.pgNo--         this.changePgItems()         event.target.scrollTop=offsetHeight-1       }       if(scrollBottom===scrollHeight || scrollBottom===scrollHeight+2)       {         if(this.pgNo==Math.ceil(this.rawItems.length/this.pgSize))         {           return         }         this.pgNo++         this.changePgItems()         event.target.scrollTop=1       }     },     changePgItems(){       var start = (this.pgNo-1) * this.pgSize,       items = this.rawItems.slice(start,this.pgSize+((this.pgNo-1)*this.pgSize))       this.items = items     }   } }     </script>   <style lang="less">   .wraper{   border:1px solid red;   height:100vh;   overflow-y: auto;   box-sizing: border-box;       .item{     height: 30px;     border-bottom: 1px solid #ccc;   } } </style>