Vue无限滚动加载组件封装

朴灿烈づ我的快乐病毒、 2023-01-15 03:49 305阅读 0赞

## vue组件的封装 ##

<template>
      <div class="infinite-list-wrapper" ref="scrollView" style="">
        <ul
          class="list"
          v-infinite-scroll="load"
          infinite-scroll-disabled="disabled"
        >
          
          <el-timeline v-for="i in value" class="list-item" :key="i.id">
            
            <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)
        },