VUE list page for paging (drop-down in the end to trigger the next section)

<!--  -->
<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="{ width: item.proportion+'%'} > Has robbed member {{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: to true, // pull-down load 
      listlength:. 1 
    }; 
  }, 
  Mounted () { 
    var that = the this 
    that.getBuyoutActiveList () 
    that.getBuyoutGoodsList () window.addEventListener (
    'scroll', this.scroll, to false) // monitor (binding) scroll wheel events 
  }, 
  Methods: { 
    // horizontal scrolling data Bypass 
    getBuyoutActiveList () {
       var that = the 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 {
            . Toast that $ (result.message); 
          } 
        }) 
        . the catch (ERR => { 
          that $ Toast (result.message.); 
        }); 
    }, 
    // load rolling tab 
    Scroll () { 
      var = that the this 
      // when the scroll bar to scroll scrollTop, the distance from the top 
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 
      highly visible area // windowHeight 
      var windowHeight = document.documentElement.clientHeight || document.body.clientHeight; 
      // scrollHeight the total height of the scroll bar 
      var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; 
      conditions // scroll bar in the end portion
      IF (+ windowHeight scrollTop the scrollHeight == == && that.onPullDown to true) { 
        // load data 
        that.page = that.page +. 1 
        that.getBuyoutGoodsList (); 
      } 
    }, 
    // Product Information page jump 
    goodsDetails (val) {
       var that = the this ; 
      that $ router.push ({path:. " / goodsDetails " , Query: {goodsId: Val}}); 
    }, 
    // enter details page 
    details (Val) {
       var that = the this ; 
      . $ that router.push ({ 
        path: " / funGoodsAreaDetail " , Query: {
          buyout_id: Val, 
          enterStatus: ' funGoodsArea ' 
        } 
      }); 
    } 
  }, 
  Destroyed () { window.removeEventListener (
    'Scroll', this.scroll) // out of the page clear (remove) the scroll wheel event 
  } 
};
 </ Script > 
<style lang = " SCSS " > 
.funGoodsArea { 
  .fun -goods- box1 { 
    background: White; 
    padding -bottom: 0 .3rem; 
    margin -bottom: 0 .3rem; 
    .fun - DIV1 { 
      width: 100%;
      background-repeat: no-repeat;
      background-image: url("../../assets/img/fun-goods1.png");
      background-size: 100% 100%;
      margin-bottom: 0.3rem;
      .img-banner {
        width: 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 {
        width: 100%;
        white-space: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        display: flex;
        .fun-goods-scroll-list {
          padding: 0.2rem;
          box-sizing: border-box;
          width: 5rem;
          background: rgba(245, 245, 245, 1);
          border-radius: 0.06rem;
          display: flex;
          margin-right: 0.2rem;
          .t-left {
            width: 1.6rem;
            height: 1.8rem;
            margin-right: 0.2rem;
            border-radius: 0.05rem;
          }
          .t-right {
            width: 10rem;
            .t-div1 {
              font-size: 0.26rem;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
              width: 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-width: 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>