Vue无限滚动加载组件封装

vue组件的封装

<template>
  <div class="infinite-list-wrapper" ref="scrollView" style="">
    <ul
      class="list"
      v-infinite-scroll="load"
      infinite-scroll-disabled="disabled"
    >
      <!-- <li v-for="i in count" class="list-item" :key="i">{{ i }}</li> -->
      <el-timeline v-for="i in value" class="list-item" :key="i.id">
        <!-- <el-timeline-item :timestamp="i.time" placement="top">
          <p>{{ i.title }}</p>
          <h4>{{ i.describe }}</h4>
        </el-timeline-item> -->
        <el-timeline-item :timestamp="i.time" placement="top">
          <el-card>
            <h4>{{ i.title }}</h4>
            <p>{{ i.describe }}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </ul>
    <p class="more" v-if="loading">加载中...</p>
    <p class="more" v-if="noMore">没有更多了</p>
  </div>
</template>

<script>
export default {
  props: ['count', 'value'],
  data () {
    return {
      loading: false
    }
  },
  computed: {
    noMore () {
      if (!this.value) {
        return false
      } else if (this.value.length === this.count) {
        return this.count < this.value.length
      } else if (this.count % this.value.length !== 0) {
        return true
      }
    },
    disabled () {
      return this.loading || this.noMore
    }
  },
  created () {

  },
  mounted () {
  },
  methods: {
    load () {
      //滚动条滚到底部之后触发这个方法
      this.loading = true
      // 滚动条到底之后暴露出这个方法 每次加载的条数
      this.$emit('pagination_Count', this.count)
      setTimeout(() => {
        this.loading = false
      }, 2000)
    },
    resultScroll () {
    //点击切换之后 回到顶部
      this.$refs.scrollView.scrollTop = 0
      // console.log(this.$refs.scrollView.scrollTop, 'this.$refs.scrollView.scrollTop')
    }
  }
}
</script>
<style lang="scss" scoped>
h4,
p {
  margin: 0;
}
.more {
  text-align: center;
  font-size: 14px;
}
.infinite-list-wrapper {
  overflow: auto;
  max-height: 100%;
  // scrollbar-width: 0;
}
// @charset "utf-8";
::-webkit-scrollbar {
  width: 0px;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.1);
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: rgba(0, 0, 0, 0.1);
}
</style>

引入 注册 使用就不多赘述了

import ScrollView from './ScrollView'

//vue
//  message是父组件传递给子组件  子组件value接收 主要是传递过去直接渲染的
//  paginationCount主要是处理到底之后加载数据的条数
<ScrollView :count="count"  v-model="message"  ref="ScrollView" @pagination_Count="paginationCount" />

//js
paginationCount (res) {
      setTimeout(() => {
        this.count = res + 5
        this.informationPagination(this.timeYear, this.count)  //请求数据的条数
      }, 2000)
    },