实现美食杰的一点点记录

vue中轮播图的实现
通过element-ui设置轮播图的框架 然后通过异步请求数据再接收数据最后在框架上遍历
script中的内容

mounted(){
      getBanner().then(({data})=>{
        // console.log(data);
        this.banners = data.list;
      }),
  }

template的内容

<el-carousel :interval="2000" type="card" height="300px">
  <el-carousel-item v-for="item in banners" :key="item._id">
     <router-link to="">
          <img :src="item.product_pic_url" width="100%" alt="">
     </router-link>
  </el-carousel-item>
     
</el-carousel>

效果图如下

Vue中的监听滚动事件方法
一般我们常见的效果分别有滚动到指定位置的吸附，滚动到指定位置时显示某元素

这两种方式都可以通过监听scroll来实现。

window.addEventListener('scroll', this.handleScroll, true)

window.removeEventListener('scroll', this.handleScroll, true)

接下来是我在写美食杰如何实现监听滚动事件的代码

template的内容

<waterfall ref="waterfall" @view="loadingMenuHandle">
    <menu-card :margin-left="13" :info="menuList"></menu-card>
</waterfall>

script中内容

methods:{
      loadingMenuHandle(){
        //  console.log("在外监听的滚动");
         this.page++;
          //每次监听到滚动后，都将下一页的五条数据显示出来
         getMenus({page:this.page}).then(({data})=>{
            // this.menuList = data.list;
            this.menuList.push(...data.list);
            this.$refs.waterfall.isLoading = false;
         });
      }
  }

因为我用了vuex 所以我在另一个组件里写了内容 为了实现加载滚动显示

<div class="waterfall" ref="waterfall">
    <slot></slot>
    <div class="waterfall-loading" ref="loading">
      <i class="el-icon-loading"></i>
    </div>
</div>

下面是script中的内容

data() {
  return {
    isLoading: false,
  };
},
mounted() {
  window.addEventListener("scroll", () => {
    if (this.isLoading) {
      return;
    }
    if (
      this.$refs.waterfall.getBoundingClientRect().bottom <
      document.documentELment.clientHeight
    ) {
      this.isLoading = true;
      this.$emit("view");
    }
  });
},
destroyed() {
  window.removeEvenetListener("scroll")
}

效果图如下


总结:

1.学会了如何实现监听滚动事件

2.熟练掌握请求遍历