vue 基于element的v-infinite-scroll支持无限滚动

样式效果：

无限滚动插件

    <div
      class="topHot"
      ref="topHot"
      v-infinite-scroll="Hotload"
    >
     // 子元素
    </div>

// 方法
    async Hotload () {
      if (this.HotScrollloading) return
      this.HotScrollloading = true
      await this.getGifHot()
      this.HotScrollloading = false
    },
    async getGifHot () {
      try {
        // 让input 失去焦点， 避免重复按下enter获取数据
        this.$refs.searchInput.blur()
        let res = await gifsTrending({
          api_key: 'api_key',
          limit: 32,
          offset: this.Hotoffset,
          lang: 'en'
        })
        console.log(res);
        if (res.status === 200 && res.statusText === 'OK') {
          console.log(_.cloneDeep(res.data.data));
          let resData = _.cloneDeep(res.data.data).map(item => {
            item = {
              ...item,
              active: false,
              downLoad: false,
            }
            return item
          })
          this.HotList = [...this.HotList, ...resData]
          this.Hotoffset = this.Hotoffset + res.data.data.length
        }
      } 
    },

.topHot {
    display: grid;
    grid-template-columns: repeat(auto-fill, 100px);
    grid-template-rows: auto;
    grid-row-gap: 12px;
    grid-column-gap: 6px;
    margin-bottom: 12px;
    margin-top: 12px;
    overflow-y: auto;
    max-height: calc(100vh - 157px);
    &::-webkit-scrollbar {
      width: 7px;
      height: 7px;
      background-color: transparent !important;
    }

    /*定义滚动条轨道 内阴影+圆角*/
    &::-webkit-scrollbar-track {
      box-shadow: inset 0 0 6px transparent !important;
      -webkit-box-shadow: inset 0 0 6px transparent !important;
      border-radius: 10px !important;
      background-color: transparent !important;
    }

    /*定义滑块 内阴影+圆角*/
    &::-webkit-scrollbar-thumb {
      border-radius: 10px !important;
      box-shadow: inset 0 0 6px transparent !important;
      -webkit-box-shadow: inset 0 0 6px transparent !important;
      background-color: #232228 !important;
    }
    &:hover {
      &::-webkit-scrollbar {
        width: 7px;
        height: 7px;
        background-color: #252528 !important;
      }

      /*定义滚动条轨道 内阴影+圆角*/
      &::-webkit-scrollbar-track {
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3) !important;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3) !important;
        border-radius: 10px !important;
        background-color: #252528 !important;
      }

      /*定义滑块 内阴影+圆角*/
      &::-webkit-scrollbar-thumb {
        border-radius: 10px !important;
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1) !important;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1) !important;
        background-color: #6a6a6c !important;
      }
    }
    .singleItemImg {
      width: 96px;
      height: 54px;
      background-color: #1c1a20;
      position: relative;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      border: 1px solid #232228;
      border-radius: 4px;
      overflow: hidden;
      .elImg {
        border-radius: 4px;
      }
      &:hover {
        transition: all 0.4s;
        box-shadow: rgb(41, 89, 141) 0px 20px 30px -10px;
        .collectIcon {
          display: block !important;
        }
      }
      .bottonIcon {
        position: absolute;
        top: 4px;
        right: 4px;
        width: 50px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        font-size: 18px;
        color: white;
        .collectIcon {
          display: none;
          transition: all 0.1s;
          position: absolute;
          left: 0;
          top: 5px;
          width: 20px;
          height: 20px;
          &:hover {
            font-size: 20px;
          }
        }
        .downloadIcon {
          transition: all 0.1s;
          position: absolute;
          right: 5px;
          top: 5px;
          width: 20px;
          height: 20px;
          &:hover {
            font-size: 20px;
          }
        }
        .posTop {
          position: absolute;
          right: 0;
          top: 0;
        }
        .iconCD.active {
          color: red;
        }
      }
    }
    .singleItemImg.active {
      border: 1px solid white;
    }
    .elImg {
      width: 94px;
      height: 54px;
    }
  }