实现美食杰的一点点记录-一一网

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="https://juejin.cn/post/item.product_pic_url" width="100%" >
     </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")
}
复制代码

效果图如下