vue下拉加载更多数据

1.div内容

 <div

              class="qkdqMenu"

              v-for="(item, index) in recomList"

              :key="index"

              @click="goChild(item)"

            >

              <div class="kwtjImg">

                <img

                  src="../../assets/img/none.jpg"

                  alt=""

                  style="width: 100%; height: 100%"

                  v-if="item.qkfy == null"

                />

                <img :src="item.qkfy" alt="" style="width: 100%; height: 100%" v-else />

              </div>

              <div class="qkdqIntr">

                <div class="qkdpTitle" :title="item.qkmc">{{ item.qkmc }}</div>

                <div class="intr">{{ item.introduce }}</div>

              </div>

              <div class="qkdqImg">荐</div>

            </div>

2.vue调用

mounted() {

    window.addEventListener("scroll", this.onScrollFunc, true);

  },

  beforeUnmount() {

    window.removeEventListener("scroll", this.onScrollFunc, true);

  },

  unmounted() {

    window.removeEventListener("scroll", this.onScrollFunc, true);

  },

  destroyed() {

    window.removeEventListener("scroll", this.onScrollFunc, true);

  },

  methods: {

    onScrollFunc() {

      //变量scrollTop是滚动条滚动时,距离顶部的距离

      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

      //变量windowHeight是可视区的高度

      var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;

      //变量scrollHeight是滚动条的总高度

      var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;

      //滚动条到底部的条件

      if (scrollTop + windowHeight == scrollHeight) {

        //写后台加载数据的函数

        // console.log(

        //   "距顶部" + scrollTop + "可视区高度" + windowHeight + "滚动条总高度" + scrollHeight

        // );

        if (this.tableParams.pageCurrent > this.tableParams.total) {

        } else {

          this.tableParams.pageCurrent += 1;

          this.getKWTJ();

        }

      }

    },

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值