欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue无限滚动加载组件封装

程序员文章站 2022-03-29 08:22:06
...

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)
    },