html plus css style to achieve js food project home page サンプルコード

import elementUi from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(elementUi)

<script>
import MenuCard from '@/components/menu-card.vue' //imported component 1
import Waterfall from '@/components/waterfall.vue'//imported component 2
import {getBanner,getMenus} from '@/service/api.js' // introduced wrapped api methods
// import register use
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)
    }),
    // 1.
    getMenus({page:this.page}).then(({data})=>{
      console.log(data)
      // this.menuList=data.list;you can't assign a page number like this when it's passed
      this.menuList=data.list;// the first page of data is stored
      // this.pages=Math.ceil(data.total/data.page_size)
    })
  },
  methods:{
    loadingMenuHanle(){
      console.log('Scrolling on external listener')
      this.page++;
      // 2.
      if(this.page > this.pages){
        this.$refs.waterfall.isloading=false;
        return;
      }
      this.$refs.waterfall.isloading=true;
      getMenus({page:this.page}).then(({data})=>{
        this.menuList.push(. .data.list);// continue adding (push) rendering five more data after the first data load is complete
        this.$refs.waterfall.isloading=false;
     })
    }
  }
}
</script>