项目：Vue.js高仿饿了吗外卖APP（二）

最新推荐文章于 2024-04-13 09:50:10 发布

原创

最新推荐文章于 2024-04-13 09:50:10 发布 · 3.2k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#饿了吗 #goods商品详情 #vue

本文介绍了使用Vue.js高仿饿了么外卖APP的商品列表开发，涉及flex布局、vue-resource数据获取、better-scroll滚动插件、Vue组件交互等技术。详细讲解了商品列表的布局技巧、数据遍历、滚动联动效果以及购物车组件的实现，包括购物车详情页的展开与折叠功能。同时提到了在开发过程中遇到的问题和解决方案，如事件冒泡和元素定位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【vue】饿了吗项目 – goods商品列表开发

（PS：结合自己这几天看的，以及前人给出的经验，借鉴他人的博客，总结出下面的内容）

1.flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

flex-grow 一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
flex-shrink 一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
flex-basis 项目的长度。合法值：”auto”、”inherit” 或一个后跟 “%”、”px”、”em”或任何其他长度单位的数字。
px和emde 区别：
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。
参考：https://blog.youkuaiyun.com/chenjuan1993/article/details/81356497

2.采用绝对定位，相对于父元素

.good
  display： flex
  position： absolute
  width： 100%
  top： 174px
  bottom： 46px
  overflow： hidden

3.使用vue-resourse获取json并应用到模板

现在越来越多的数据传输方式都是json数据格式，包括用jquery开发时，也有很好用的$.ajax来进行数据请求与处理，那么vue-resource提供了一种类似的，并且api更加简洁易用，压缩后文件更小。配合ES 6的Lambda写法，更加优雅
官网：https://github.com/pagekit/vue-resource/blob/master/docs/http.md

props: {
      seller: {
        type: Object
      }
    },
    data () {
      return {
        goods: [],  //一开始goods为空
        listHeight: [],
        scrolly: 0,
        selectedFood: {}
      };
    },
    created() {   //当这个组件被调用的时候，通过后端获得数据赋值给goods
      this.$http.get(‘/api/goods‘).then((response) => {  //   ‘/api/goods‘请求的是data.json下的goods数组
        response = response.body;
        if (response.errno === ERR_OK) {
         this.goods = response.data;
        this.$nextTick(() => {  //可以用 $nextTick 來确保Dom变化后再执行一些事情
         this._initScroll();
         this._calculateHeight();
      });
       }
      });this.classMap = [‘decrease‘, ‘discount‘, ‘special‘, ‘invoice‘, ‘guarantee‘];
    },

注：vue更新到2.0之后，作者就宣告不再对vue-resource更新，而是推荐的axios，它的基本用法可以参考：http://www.kancloud.cn/yunye/axios/234845

4.遍历取数据

<span class="text">
    <span v-show="item.type>0" class=" icon" :class="classMap[item.type]"></span>{
   
   {
   
   item.name}}
</span>

classMap[item.type]是一个数组，通过item.type去取对应的class，item.type是data.json中mock的数据

5.display table

此元素会作为块级表格来显示（类似

），表格前后带有换行符。

在table中可用vertical-align：middle实现垂直居中

6.添加better-scroll依赖

链接：https://github.com/ustbhuangyi/better-scroll

<div class="menu-wrapper" ref="menuWrapper">
   <ul>
      <li v-for="(item, index) in goods" class="menu-item border-1px" :class
      {‘current‘:currentIndex === index}" @click="selectMenu(index, $event)">
         <span class="text">
           <span v-show="item.type>0" class=" icon" :class="classMap[item.type]"  </span>{
   
   {
   
   item.name}}
          </span>
      </li>
   </ul>
</div>
<div class="foods-wrapper" ref="foodWrapper">
   <ul>
     <li v-for="item in goods" class="food-list food-list-hook">
        <h1 class="title">{
   
   {
   
   item.name}}</h1>
          <ul>
            <li v-for="food in item.foods" class="food-item" @click="selectFood(food, $event)">
              <div class="icon">
                <img :src="food.icon" alt="" width="57">
              </div>
              <div class="content">
                <h2 class="name">{
   
   {
   
   food.name}}</h2>
                <p class="desc">{
   
   {
   
   food.description}}</p>
                <div class="extra">
                  <span class="count">月售{
   
   {
   
   food.sellCount}}</span><span class="count">好评{
   
   {
   
   food.rating}}</span>
                </div>
                <div class="price">
                  <span class="now">￥{
   
   {
   
   food.price}}</span><span class="old" v-show
="food.oldPrice">￥{
   
   {
   
   food.oldPrice}}</span>
                </div>
                <div class="cartControl-wrapper">
               <cartControl :food="food" @increment="incrementTotal"></cartControl>
                </div>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </div>