README
vue-efficient-scroll-list
Usage
npm install vue-efficient-scroll-list --save
<template>
<div class="home">
<h2>scrollViewDemo</h2>
<div style="width: 90vw;height:80vh;margin: auto">
<effScrollView ref="scrollView"
@arriveBottom="loading"
@pullAndRelease="updated"
:list="msgList"
noMoreMsgTip="no more data..."
pullDownTip="release to refresh..."
:singleCount="10">
<template v-slot="{list}">
<div v-for="(v,i) in list" :key="i" class="msgItem">
<img src="https://img.yzcdn.cn/vant/logo.png" width="100" height="100">
<div>
<b>title{{i}}</b>
<div>{{'x'.repeat(60)}}</div>
</div>
</div>
</template>
</effScrollView>
</div>
</div>
</template>
<script>
import effScrollView from 'vue-efficient-scroll-list'
export default {
name: 'home',
components: {
effScrollView
},
data(){
return{
msg:8000,
msgList:new Array(10).fill(1),
isNoMore:false
}
},
methods: {
loading() {
// you should get data from backend actually
setTimeout(d=>{
if(this.msgList.length>60){
// show noMore when backend haven't data anymore
this.$refs.scrollView.noMore()
// hide topTip and bottomTip after list updated
this.$refs.scrollView.finishUpdate()
}else {
// add data
this.msgList.push(...new Array(10).fill(null))
// hide topTip and bottomTip after list updated
this.$refs.scrollView.finishUpdate()
}
},800)
},
updated(){
// you should get data from backend actually
setTimeout(()=>{
// update msgList
this.msgList=new Array(10).fill(1)
// hide topTip and bottomTip after list updated
this.$refs.scrollView.finishUpdate()
},800)
}
}
}
</script>
Contributions
Welcome to improve this component with any issue, pull request or code review.
Changelogs
Maintain and update occasionally, for changes see release.