瀑布流怎么写

瀑布流

列表代码

首先我们要了解瀑布流是什么简单来说抖音都刷过吧，随着往下滑动就会有源源不断的视频，比如京东往下滑动也会有源源的断的商品，像这种就是瀑布流。好了话不多说上干货

首先我们在data定义一个变量控制他显示隐藏

data(){
return{
isLoading：false
}
}

用声明周期函数的挂载完成函数

mounted(){
this.scrollHandler = throttle(1000,this.scroll.bind(this));
window.addEventListener(“scroll”,this.scrollHandler);
},
1.首先监听滚动事件的监听 2.优化频繁更新节流 3.throttle(间隔时间,执行的函数)

用销毁完成的声明周期函数

destroyed(){
window.removeEventListener(“scroll”,this.scrollHandler);
},
2.防止销毁事件还在执行

判断

methods:{
scroll(){
if(this.isLoading) return;
if(this.KaTeX parse error: Expected '}', got 'EOF' at end of input: … this.emit(‘view’);
}
}
}
}
上面是列表页的内容下面是主页的内容

主页的代码

mounted(){
getMenus({page:this.page}).then(({data})=>{
this.menuList = data.list;
});
},
1.首页加载后，一次显示的五条数据，显示给用户

methods:{
loadingMenuHandle(){
this.page++；
监听到滚动就加载五条数据
getMenus({page:this.page}).then(({data})=>{
this.menuList.push(…data.list);
this.$refs.waterfall.isLoading = false;
});
}
}
}