标签：__ console log waterfall 美食 data page 轮播

效果图片

在home文件夹中的Home.vue中

html内容

<template>
  <div class="home">
    <!-- 轮播 start -->
    <el-carousel :interval="5000" type="card" height="300px">
      <el-carousel-item v-for="item in banners" :key="item._id">
        <!--/detail?menuId=5d83bfba2f7cb93a4009cf98-->
        <router-link :to="{name:'detail', query:{memuId: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="loadingMenuHanle">
        <menu-card :margin-left="13" :info="menuList"></menu-card>
      </waterfall>
    </div>
    <!-- 内容精选 瀑布流形式 end -->
  </div>
</template>

script代码

<script>
import MenuCard from '@/components/menu-card.vue'
import Waterfall from '@/components/waterfall.vue'
import { getBanner,getMenus } from '@/service/api.js'
// 引入 注册 使用
export default {
  name: 'home',
  components: {
    MenuCard: MenuCard,
    Waterfall
  },
  data(){
    return {
      banners:[],
      menuList:[],
      page:1,
      // pages:5
    }
  },
  mounted(){
    getBanner().then(({data}) => {
      this.banners = data.list;
      // console.log(this.banners)
    });
    getMenus({page:this.page}).then(({data})=>{
      console.log(data);
      this.menuList = data.list;  //存了第一页的五条
    })
  },
  methods:{
    loadingMenuHanle(){
      console.log('在外部监听的滚动');
      this.page++;

      if(this.page > this.pages){
        this.$refs.waterfall.isLoading = false;
        return;
      }
      this.$refs.waterfall.isLoading = true;

      getMenus({page:this.page}).then(({data})=>{
        console.log(data);
        this.menuList.push(...data.list) //存了第二页的五条
        this.$refs.waterfall.isLoading = false;
      })
    }
  }
}
</script>

style内容

<style lang="stylus">
.home 
  h2
    text-align center
    padding 20px 0;
    
  .el-carousel__item h3 
    color #475669
    font-size 14px
    opacity 0.75
    line-height 200px
    margin 0
  
  .el-carousel__item:nth-child(2n) 
    background-color #99a9bf
 
  .el-carousel__item:nth-child(2n+1) 
    background-color #d3dce6
  
</style>

标签：__,console,log,waterfall,美食,data,page,轮播
来源： https://blog.csdn.net/yxy831524yxy/article/details/120476062

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。