html加css样式实现js美食项目首页示例代码

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

<script>
import MenuCard from '@/components/menu-card.vue' //引入的组件1
import Waterfall from '@/components/waterfall.vue'//引入的组件2
import {getBanner,getMenus} from '@/service/api.js'//引入的封装好的api方法
// 引入 注册 使用
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;当传了页码就不能这么赋值了
      this.menuList=data.list;//存了第一页的数据
      // this.pages=Math.ceil(data.total/data.page_size)
    })
  },
  methods:{
    loadingMenuHanle(){
      console.log('在外部监听的滚动')
      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);//在第一次数据加载完成后再继续添加(push)渲染五条数据
        this.$refs.waterfall.isloading=false;
     })
    }
  }
}
</script>