美食杰项目首页开发

<div class="home">     <!-- 轮播 start -->     <el-carousel :interval="2000" type="card" height="300px">       <el-carousel-item v-for="item in banners" :key="item._id">         <!--/detail?menuId=5d83bfba2f7cb93a4009cf98-->_         <router-link :to="{name:'detail', query:{menuId:item._id}}">           <img             :src="item.product_pic_url"             width="100%"                          alt=""           >         </router-link>       </el-carousel-item>           </el-carousel>     <!-- 轮播 end -->     <!-- 内容精选 瀑布流形式 start -->     <div>       <h2>内容精选</h2>       <!-- :info='info' -->       <waterfall ref="waterfall" @view="loadingMenuHandle">         <menu-card :margin-left="13" :info="menuList"></menu-card>       </waterfall>     </div>

// 引入 注册 使用 export default {   name: 'home',   components: {     MenuCard: MenuCard,     Waterfall   },   data(){     return {       menuList:[],       bannes:[],       page:1     }   },   mounted(){ 获取轮播图数据     getBanner().then(({data})=>{       // console.log(data);       this.bannes=data.list             }) 获取浏览产品数据     getMenus({page:this.page}).then(({data})=>{       // console.log(data)       this.menuList=data.list     })   }, 监听滑动滚动条加载数据   methods:{      loadingMenuHandle(){        console.log('在外部监听');        this.page++        getMenus({page:this.page}).then(({data})=>{                    this.menuList.push(...data.list);          this.$refs.waterfall.isLoading=false;        })      }   } } 滑动滚动条页面 div class="waterfall" ref="waterfall">     <slot></slot>     <div class="waterfall-loading" ref='loading' v-show="isLoading">       <i class="el-icon-loading"></i>     </div>   </div>

export default {   name: 'Waterfall',   data(){     return {        isLoading:false     }   },   mounted(){     // 优化触发太频繁的问题， 节流     //  throttle(间隔时间,执行的函数)       this.scrollandler=throttle(1000,this.scroll.bind(this));       window.addEventListener("scroll",this.scroll);   }, // 防止之后组件被销毁时，事件依然存在的问题   destroyed() { // 添加滚动事件的监听(里面有两个参数 一个是事件  一个是函数)     window.removeEventListener("scroll",this.scrollHandler);   },   methods:{      scroll(){        if(this.isLoading) return;        console.log(this.$refs.waterfall.getBoundingClientRect());        if(this.$refs.waterfall.getBoundingClientRect().bottom<document.documentElement.clientHeight){          console.log("快要到底了");          this.isLoading=true;          this.$emit('view');        }      }   } }