html加css样式实现js美食项目首页示例代码（html加css加JavaScript）怎么可以错过


<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>