文章摘要
这篇文章主要讲述了如何在Vue组件中实现数据动态加载、分页展示以及滚动加载的控制。文章详细介绍了如何引入必要的组件（如`MenuCard`和`Waterfall`）以及封装好的API方法（如`getBanner`和`getMenus`），并通过`mount`生命周期方法和`loadingMenuHanle`方法来处理数据加载和滚动事件。文章重点描述了如何根据页码加载菜单数据，并通过滚动事件动态调整加载状态，以确保良好的用户体验。
<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>