vue项目实战--美食杰之首页

       读者，大家好，此篇分享一个笔者写过的vue项目，名叫美食杰，是一个PC端项目，分享出来的目的是为了可以让大家共同学习进步，也期望各位读者能指出笔者的不足之处，感谢！！

       正片开始。。。

        1.首页的展示和介绍

              头部板块，因为此头部板块在整个项目中多地使用，所以我将其放在公共组件部分，名为header.vue

              导航板块，就是黄线框框部分，在此板块中拥有两个切换的模板，今天只说首页板块

           轮播图板块，使用elemnt-ui实现的轮播图效果

       内容精选，首页展示模块，使用了element-ui实现的布局

          好啦，首页的展示完毕

2.布局和功能的实现

 （1）头部，使用element-ui来实现布局，主要是使用栅格布局，左边图片模板，右边登录模板

{{userInfo.name}}发布菜谱退出登录注册

 （2）导航模板，使用element-ui的导航菜单组件来实现

（3）轮播图模板，使用element-ui的走马灯组件中的卡片化组件来完成，图片数据是从接口中请求得到，放入vue实例data中，渲染到组件上

（4）内容精选模板，使用element-ui的栅格布局中的分栏间隔组件来完成布局，数据从后端接口中请求并渲染

       内容模板有一个具体的功能需要实现，就是节流，因为我们的数据中的数据过于庞大，一次全部渲染的话非常耗费性能，导致用户体验差

     具体实现：

1.首次加载一部分，我们这里是五个数据

          在请求数据时携带参数指定展示的页数，常理来说默认值是1，请求到数据渲染到页面

 data(){return {banners:[],menuList:[],//当前页数page:1,//总页数pages:null}},

getMenus({page:this.page}).then(data=>{this.page = data.data.current_pagethis.menuList = data.data.listthis.pages = Math.ceil(Number(data.data.total) / Number(data.data.page_size))})

2.当鼠标滚轮滚动到指定位置时，加载下次数据

       给浏览器添加滚轮事件

 mounted(){this.scrollHanle = throttle(500,this.scroll.bind(this))window.addEventListener('scroll',this.scrollHanle)},

    判定滚轮位置，达到设定值，使用v-if或v-show触发加载动画，并再次请求数据，获取下次数据，我这里使用了父子组件，所以要修改值，需要用到$emit 

   scroll(){if(this.isloading) returnif(this.$refs.waterfall.getBoundingClientRect().bottom

 loadinghandle(){this.page++if(this.page <= this.pages){this.$refs.waterfall.isloading = truegetMenus({page:this.page}).then(data=>{this.menuList.push(...data.data.list)this.$refs.waterfall.isloading = false})}else{this.$refs.waterfall.isloading = false           }}

 mounted(){this.scrollHanle = throttle(500,this.scroll.bind(this))window.addEventListener('scroll',this.scrollHanle)},

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！