Home组件代码示例如下：

  <div class="home">
    <one-type-nav></one-type-nav>
    <banner></banner>
     <good-list :list="goodsData"></good-list>
     <div class="loading">{{loadingMsg}}</div>
  </div>
</template>

<script>
// @ is an alias to /src
import oneTypeNav from '@/components/OneTypeNav.vue'
import banner from '@/components/Banner.vue'
import goodList from '@/components/GoodList.vue'

import {getShopList} from "../tools/ajax.js"
export default {
  name: 'Home',
  data() {
    return {
      page:0,
      isLoading:false ,//
      loadingMsg:"正在加载中...",
      goodsData:[]
    }
  },
  components: {
   oneTypeNav,
   banner,
   goodList
  },
  created() {
    // 初始化请求数据
    this.getGoodsData()
    this.bindScroll()
},
destroyed() {
  this.clearScroll()
},
  methods: {
    // 绑定scroll事件
      bindScroll(){
        window.addEventListener("scroll",this.scrollHandle)
      },
    
    // 清除scroll事件
    clearScroll(){
      window.removeEventListener("scroll",this.scrollHandle)
    },
    // 滚动的回调函数
    scrollHandle(){
        // scroll和input 滑动等事件都是高频率的触发事件，所以在写这些的事件的
        // 回调尽量加上防抖和节流
        if(this.isLoading) return // 正在加载的时候，如果在滚动着时候不请求新数据

        var B = document.documentElement.scrollHeight // html元素的内容的高度
        var H  = window.innerHeight  // 获取窗口的高度
        var S = document.body.scrollTop||document.documentElement.scrollTop //滚出去的高度
        if(B-H-S<50){
          //  快触底 请求新数据
          this.getGoodsData()
        }
    },

    // 请求商品数据
     getGoodsData(){
        this.page++ // 先把页面加1
        this.isLoading = true //正在加载中
        getShopList({page:this.page}).then(data=>{
          this.isLoading = false//本次请求结束
          if(data.length>0){ // 如果数据存在
            this.goodsData.push(...data) //把本次数据放进数组里面

          }else{
            this.loadingMsg = "我是有底线的！！！"
          }
        })
     }
  },
}
</script>

<style lang="scss" scoped> 
  .loading{
    margin-top: 10px;
    color: purple;
    padding: 3px;
  }
</style>

GoodList.nue组件代码如下：

     <div class="goods-box">
         <router-link :to="`/detail?gId=${good.Id}`" v-for="(good,i) in list" :key="i" > //拼接字符串'"/detail?gId="+good.Id'
            <img v-lazy="good.imageUrl" alt="">
            <h4 class="title">{{good.title}}</h4>
            <p>
                <span class="price">￥{{good.priceStr}}</span>
                <span class="mack" v-html="good.mack"></span>
            </p>
         </router-link>   
     </div>
</template>

<script>
export default {
    props:["list"]
}
</script>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                
<style scoped>
    .goods-box{
        width: 1100px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        
    }
    .goods-box::after{
        content: "";
        flex:1;
    }
    a{
        width: 200px;
        height: 220px;
        border: 1px solid lightgray;
        box-sizing: border-box;
        margin-top: 20px;
        margin-left: 20px ;
        text-decoration: none;

    }
    img{
        width: 160px;
        height: 160px;
    }
    .price{
        text-align: left;
        float: left;
        position: relative;
        top: 10px;
        color: red;
    }
    .mack{
        float: right;
        position: relative;
        top: 10px;
    }
    .title{
        text-align: left;
        color: black;
        font-size: 15px;
        position: relative;
        left: 5px;
    }
    .mack>>>span{
        padding: 5px;
    }
</style>