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.

License

MIT License.