Vue仿饿了么项目
gxgalaxy
这个作者很懒,什么都没留下…
展开
-
Vue.js仿饿了么外卖App--(6)商家详情页实现
文章目录一、内容介绍1、内容2、效果二、具体实现1、布局2、滚动实现三、源码一、内容介绍1、内容商家详情页主要包括商家的具体信息、公告与活动、商家实景和商家信息。其中商家实景这里实现了纵向滚动,将scrollX设置为true。这一部分利用到了split组件和star组件2、效果二、具体实现1、布局<template> <div class="seller" ref="seller"> <div class="seller-content">原创 2020-09-12 09:51:08 · 2295 阅读 · 0 评论 -
Vue.js仿饿了么外卖App--(5)评价列表页实现
文章目录一、内容介绍1、内容2、效果二、具体实现1、数据的获取2、具体布局3、star组件4、ratingSelect组件三、源码一、内容介绍1、内容本篇文章主要介绍的是评价列表的实现。由于评价列表中包含的内容在前面的学习过程中我们都开发过其中的组件,例如星星组件和评价筛选组件。因此在这一部分我们只需要对组件进行复用,然后稍作改动即可。2、效果二、具体实现1、数据的获取在评价列表展示页实现过程中我们要从服务器端获取评价信息,并且评价列表展示页是可以滚动的,因此使用better-scroll原创 2020-09-11 21:27:09 · 1249 阅读 · 0 评论 -
Vue.js仿饿了么外卖App--(4)商品详情页实现
文章目录一、内容介绍1、内容2、效果二、具体实现1、组件传值2、点击事件3、图片展示4、加入购物车5、分隔条组件一、内容介绍1、内容本篇文章主要实现的是商品详情页的展示,主要包括商品图片展示、商品信息展示和商品评价展示2、效果二、具体实现1、组件传值goods.vue <Food :food="selectedFood" ref="food"></Food>food.vue通过props属性接收 props: { food: { type:原创 2020-09-10 23:56:26 · 1853 阅读 · 2 评论 -
Vue.js仿饿了么外卖App--(3)商品相关的组件的实现一
文章目录一、内容介绍1、内容2、效果展示二、详细设计:1、商品展示1)、布局页面布局数据获取和绑定2)、页面滚动安装引入使用3)、左右联动计算索引的高度实时获取滚动的高度左侧点击2、购物车组件1)、重点说明2)、具体实现页面布局组件传值接收数据计算属性3、cartcontrol组件布局增加和减少一、内容介绍1、内容本篇文章主要实现的是Vue.js仿饿了么外卖App商品相关的组件的实现,主要包括商品菜单和商品列表的展示(左右联动),shopcart组件,和cartcontrol组件,使用到了better原创 2020-09-09 23:11:53 · 1908 阅读 · 0 评论 -
Vue.js仿饿了么外卖App--(2)头部相关的组件的实现
本篇文章主要实现的是App.vue组件、头部组件header、蒙层组件detal和Modal以及路由切换router文章目录一、App.vue组件1、重点说明2、具体实现(1)、整体布局(2)、数据获取3、源码二、header.vue组件1、重点说明2、具体实现(1)、整体布局(2)、父子组件传值(3)、商家头像展示(4)、商家内容展示(5)、字体图标的使用3、源码三、蒙层组件1、detal组件2、Modal组件(1)、整体布局3、蒙层的展示和隐藏4、源码四、路由切换一、App.vue组件1、重点说明原创 2020-08-29 22:46:10 · 580 阅读 · 0 评论 -
Vue.js仿饿了么外卖App--(1)概述和项目准备
文章目录一、概述1、项目简介2、技术分析二、项目准备1.效果展示2、组件拆分3、安装4、制作图标字体文件5、项目目录构建6、写mock数据接口一、概述1、项目简介本项目主要实现的是高仿饿了么外卖App的商家模块2、技术分析 axios实现和后端的数据交互 Vue-router路由实现页面切换 Vue-cli 使用better-scroll第三方库实现页面滚动 css sticky footer布局 flex弹性布局 组件化开发 webpack构建工具 ES6+eslint规范代码原创 2020-08-26 23:05:42 · 2060 阅读 · 0 评论