VUE 列表页中实现分页（下拉到底部触发下一页 ）

<!--  -->
<template>
  <div class="funGoodsArea">
    <div class="fun-goods-box1">
      <div class="fun-div1">
        <img src="@/assets/img/fun-goods2.png"
             class="img-banner" />
      </div>
      <div class="fun-div2"
           v-show="buyOutList.length > 0">
        <p class="t-p">海淘·趣货</p>
        <div class="fun-goods-scroll">
          <!-- 列表 -->
          <div class="fun-goods-scroll-list"
               v-for="(item, index) in buyOutList"
               :key="index"
               @click="details(item.buyout_id)">
            <img :src="item.goods_pic"
                 class="t-left" />
            <div class="t-right">
              <div class="t-div1">{{ item.title }}</div>
              <div class="t-div2">每人限购{{ item.max_count }}件</div>
              <div class="t-div3">
                <span :style="{  item.proportion+'%'}">已抢{{ item.sales }}件</span>
              </div>
              <div class="t-div4">
                <p class="t-div4-p1"><span>￥</span>{{ item.buyout_price }}</p>
                <p class="t-div4-p2">立即买断</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="fun-goods-box2">
      <ActivityList :goodsList="goodsList"
                    :user_tel='1'
                    @goodsDetails="goodsDetails"></ActivityList>
      <div class="onFooter"
           v-show="onFooter==1">到底啦~</div>
    </div>
  </div>
</template>
<script>
import ActivityList from "@/components/ActivityList.vue";
import {
  getBuyoutActiveList,
  getBuyoutGoodsList
} from "@/api/index.js";
export default {
  components: {
    ActivityList
  },
  data () {
    return {
      buyOutList: [],
      goodsList: [],
      page: 1,
      limit: 15,
      onFooter: 0,
      onPullDown: true, //下拉加载
      listlength: 1
    };
  },
  mounted () {
    var that = this
    that.getBuyoutActiveList()
    that.getBuyoutGoodsList()
    window.addEventListener('scroll', this.scroll, false) // 监听（绑定）滚轮滚动事件
  },
  methods: {
    //水平滚动数据   无分页
    getBuyoutActiveList () {
      var that = this
      var par = {
        token: sessionStorage.getItem('token')
      }
      getBuyoutActiveList(par)
        .then(result => {
          if (result.code == 200) {
            that.buyOutList = result.data
          } else {
            that.$toast(result.message);
          }
        })
        .catch(err => {
          that.$toast(result.message);
        });
    },
    // 列表数据   有分页
    getBuyoutGoodsList () {
      var that = this
      var par = {
        page: that.page,
        limit: that.limit,
        token: sessionStorage.getItem('token')
      }
      getBuyoutGoodsList(par)
        .then(result => {
          if (result.code == 200) {
            if (that.goodsList.length < that.limit) {
              that.onFooter = 1;
            }
            that.goodsList = that.goodsList.concat(result.data)
            that.listlength = that.goodsList.length;
          } else if (that.page > 1 && result.code == "-9003") {
            // that.$toast("加载完毕");
            that.onFooter = 1;
            that.onPullDown = false;
          } else if (result.code == "-9003") {
            that.listlength = result.data.length;
            that.onPullDown = false;
          } else {
            that.$toast(result.message);
          }
        })
        .catch(err => {
          that.$toast(result.message);
        });
    },
    // 滚动加载分页
    scroll () {
      var that = this
      // 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 && that.onPullDown == true) {
        // 加载数据 
        that.page = that.page + 1
        that.getBuyoutGoodsList();
      }
    },
    // 商品跳详情页
    goodsDetails (val) {
      var that = this;
      that.$router.push({ path: "/goodsDetails", query: { goodsId: val } });
    },
    // 进入详情页
    details (val) {
      var that = this;
      that.$router.push({
        path: "/funGoodsAreaDetail", query: {
          buyout_id: val,
          enterStatus: 'funGoodsArea'
        }
      });
    }
  },
  destroyed () {
    window.removeEventListener('scroll', this.scroll) //  离开页面清除（移除）滚轮滚动事件
  }
};
</script>
<style lang="scss">
.funGoodsArea {
  .fun-goods-box1 {
    background: white;
    padding-bottom: 0.3rem;
    margin-bottom: 0.3rem;
    .fun-div1 {
       100%;
      background-repeat: no-repeat;
      background-image: url("../../assets/img/fun-goods1.png");
      background-size: 100% 100%;
      margin-bottom: 0.3rem;
      .img-banner {
         calc(100% - 0.6rem);
        margin-left: 0.3rem;
        margin-top: 0.6rem;
      }
    }
    .fun-div2 {
      margin: 0rem 0.3rem;
      .t-p {
        font-weight: bold;
        color: #333333;
        font-size: 0.32rem;
        padding: 0.3rem 0rem;
      }
      .fun-goods-scroll {
         100%;
        white-space: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        display: flex;
        .fun-goods-scroll-list {
          padding: 0.2rem;
          box-sizing: border-box;
           5rem;
          background: rgba(245, 245, 245, 1);
          border-radius: 0.06rem;
          display: flex;
          margin-right: 0.2rem;
          .t-left {
             1.6rem;
            height: 1.8rem;
            margin-right: 0.2rem;
            border-radius: 0.05rem;
          }
          .t-right {
             10rem;
            .t-div1 {
              font-size: 0.26rem;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
               2.8rem;
              margin-bottom: 0.1rem;
              color: #333333;
            }
            .t-div2 {
              color: #e42121;
              font-size: 0.2rem;
              margin-bottom: 0.1rem;
            }
            .t-div3 {
              background: white;
              border-radius: 0.13rem;
              font-size: 0.2rem;
              margin-bottom: 0.1rem;
              span {
                background: #f63a3d;
                color: #ffffff;
                border-radius: 0.13rem;
                padding: 0rem 0.06rem;
                display: inline-block;
                min- 30%;
              }
            }
            .t-div4 {
              display: flex;
              justify-content: space-between;
              .t-div4-p1 {
                color: #ef2222;
                font-size: 0.26rem;
                font-weight: 600;
              }
              .t-div4-p2 {
                background: #ef2222;
                color: #ffffff;
                border-radius: 0.06rem;
                padding: 0rem 0.06rem;
                box-sizing: border-box;
                font-size: 0.2rem;
              }
            }
          }
        }
      }
    }
  }
  .fun-goods-box2 {
    margin-bottom: 0.2rem;
    .onFooter {
      text-align: center;
      padding: 0.2rem 0;
    }
  }
}
</style>