首页
轮播图
数据请求
banner是在data中提前声明的一个空的数组,用来存放接收到的数据。
![](https://i-blog.csdnimg.cn/blog_migrate/2f6d24f71e268e91acb940756c7f9356.png)
ps:数据请求的方法是提前封装好的(封装方法如下)
![](https://i-blog.csdnimg.cn/blog_migrate/3854f5cb3c278c9c30f9a6a88ded7af7.png)
渲染轮播图
通过v-for遍历就可以啦!!!
![](https://i-blog.csdnimg.cn/blog_migrate/e21519ef86e6647713a9549b0a3ff44c.png)
内容精选,瀑布流形式
首先我们要先写好滑动的效果,通过$emit传递一个事件
![](https://i-blog.csdnimg.cn/blog_migrate/8cb54ff9c61e8983285619dac1acec1c.png)
然后在页面中自定义一个事件(要和你传递的事件一样哦),再请求数据,先请求五条数据
![](https://i-blog.csdnimg.cn/blog_migrate/f10ef209e24eb88e0dbe7a733f1c740c.png)
最后用我们自定义的事件,判断快滑动到底部的时候,再请求五条数据,压入到里面就实现啦
![](https://i-blog.csdnimg.cn/blog_migrate/35f3b1a84cdd339c9f4a508bbd04e8c5.png)
总结:
这样就实现了美食杰首页啦
超级超级简单,你还在想什么呢?快去上手操作吧!!!