vue 滚动加载
Posted zyip
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 滚动加载相关的知识,希望对你有一定的参考价值。
<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>
以上是关于vue 滚动加载的主要内容,如果未能解决你的问题,请参考以下文章
基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多