slot 使用

子:vue

<template>
  <div>
    <div v-for="(items, indexs) in list" :key="indexs">
      <slot :listItem="items"> </slot>
    </div>

    <Loadding v-show="show"></Loadding>
    <Not v-show="!show"></Not>
  </div>
</template>
<script>
import Loadding from "~/components/loadding.vue"
import Not from "~/components/Not.vue"
import {
  getScrollHeight,
  getScrollTop,
  getWindowHeight,
} from "~/plugins/common"

export default {
  components: {
    // eslint-disable-next-line vue/no-unused-components
    Loadding,
    // eslint-disable-next-line vue/no-unused-components
    Not,
  },
  props: {
    show: {},
    list: {},
    total: {},
    flag: {},
  },

  watch: {
    flag(value) {
      this.sonFlag = value
    },
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true)
  },
  methods: {
    handleScroll() {
      if (
        getScrollTop() + getWindowHeight() + 80 > getScrollHeight() &&
        this.sonFlag == false
      ) {
        //此时滚动条已经下拉到底部了
        // this.sonFlag = true
        this.$emit("changeFlag")

        if (this.list.length < this.total) {
          this.$emit("getScrollData")
        }
      }
    },
  },

  data() {
    return {
      pageNum: 1,
      pageSize: 15,
      sonFlag: false,
    }
  },
}
</script>
<style lang="scss"></style>

父页面的使用

    <scroll
          :show="show"
          :list="list"
          :total="total"
          :flag="flag"
          @changeFlag="changeFlag"
          @getScrollData="getScrollData"
        >
          <template #default="listItem">
            <div class="article-item">
              <div class="item">
                <div class="img"></div>
                <div class="img-left">
                  <div class="title">
                    {{ listItem["listItem"] ? listItem["listItem"].title : "" }}
                  </div>
                  <div class="content">
                    <div class="contnet-top">
                      {{
                        listItem["listItem"] ? listItem["listItem"].title : ""
                      }}
                    </div>
                    <div class="info">
                      <div class="publish-time">
                        <img
                          class="icon"
                          src="~/static/svg/common/icon_time.svg"
                        />
                        <span>
                          {{
                            listItem["listItem"]
                              ? listItem["listItem"].createTime
                              : ""
                          }}
                        </span>
                      </div>
                      <div class="view">
                        <img
                          class="icon"
                          src="~/static/svg/common/icon_eye.svg"
                        />
                        <span>
                          {{
                            listItem["listItem"]
                              ? listItem["listItem"].viewsCount
                              : ""
                          }}
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </scroll>

  changeFlag() {
    this.flag = true
  }
  getScrollData() {
    this.pageNum = this.pageNum + 1
    console.log(this.pageNum)
    axios
      .get("/zhishi/contribution/other", {
        params: {
          userId: "1351715825550966784",
          pageNum: this.pageNum,
          pageSize: 10,
        },
      })
      .then((res: any) => {
        this.list = [...this.list, ...res.data.data.responseVO.list]
        if (this.list.length == this.total) {
          this.show = false
          this.flag = true
        } else {
          this.flag = false
        }
      })
  }

 

来源：oschina

链接：https://my.oschina.net/u/4004801/blog/4919355