高仿美团VUE<1>

因为最近刚刚学习了下 VUE 所以想记录下。

话不多说先上几张图看下效果。

首页

发现页

详情

订单

我的

接下来会说下整个的高仿美团VUE<1>的实现过程

1、仿美团VUE<1>是基于vue2.0 VueCli开发的。具体VueCli项目怎么搭建现在有很成熟的文档在这不做过多的赘述。建议官网看起>>>
2、用到的第三方库：

 "dependencies": {
    "@nutui/nutui": "^2.1.8",
    "axios": "^0.19.0",
    "babel-preset-env": "^1.7.0",
    "core-js": "^3.4.3",
    "js-base64": "^2.5.2",
    "mint-ui": "^2.2.13",
    "swiper": "^5.4.1",
    "vue": "^2.6.10",
    "vue-awesome-swiper": "^4.1.1",
    "vue-clipboard": "0.0.1",
    "vue-clipboard2": "^0.3.1",
    "vue-preview": "^1.1.3",
    "vue-router": "^3.1.3"
  },

底部tab切换的实现：
引入：mui(不是标准的vue库地址)

image.png

<nav class="mui-bar mui-bar-tab">

      <router-link
        class="mui-tab-item-lib"
        to="/homepage"
      >
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
      </router-link>

      <router-link
        class="mui-tab-item-lib"
        to="/findpage"
      >
        <span class="mui-icon mui-icon-extra mui-icon-extra-class"></span>
        <span class="mui-tab-label">发现</span>
      </router-link>

      <router-link
        class="mui-tab-item-lib"
        to="/orderpage"
      >
        <span class="mui-icon mui-icon-extra mui-icon-extra-cart"> <span class="mui-badge">9</span> </span>
        <span class="mui-tab-label">订单</span>
      </router-link>

      <router-link
        class="mui-tab-item-lib"
        to="/minepage"
      >
        <span class="mui-icon mui-icon-extra mui-icon-extra-people"></span>
        <span class="mui-tab-label">我的</span>
      </router-link>

    </nav>

<style lang="scss" scoped>
.app-container {
  padding-top: 40px;
  padding-bottom: 50px;

  .mui-bar-tab .mui-tab-item-lib.mui-active {
    color: #007aff;
  }
  .mui-bar-tab .mui-tab-item-lib {
    display: table-cell;
    overflow: hidden;
    width: 1%;
    height: 50px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #929292;
  }
  .mui-bar-tab .mui-tab-item-lib .mui-icon {
    top: 3px;
    width: 24px;
    height: 24px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .mui-bar-tab .mui-tab-item-lib .mui-icon ~ .mui-tab-label {
    font-size: 11px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.mint-header {
  background: rgba(244, 191, 66, 1);
}
.v-enter {
  opacity: 0;
  transform: translateX(100%);
}
.v-leave-to {
  opacity: 0;
  transform: translateX(-100%);
  position: absolute;
}

头部：不随着页面的滚动而滚动

header

引用mintUI官网地址

  <mt-header
      fixed
      title="美团"
    ></mt-header>

9宫格通用组件的定制：

image.png

<template>
  <div
    class="mt-item-div"
    :style='currentStyle'
    @click="itemClick"
  >
    <img
      :src='imgUrl'
      alt=""
    >
    <p>{{title}}</p>
  </div>
</template>

一张图片和一个p标签

<script>
export default {
  props: {
    isFourColumns: {
      type: Boolean,
    },
    title: {
      type: String,
      default: ""
    }
    ,
    imgUrl: {
      type: String,
      default: "image/icon_vip.png"
    }
  },
  computed:{
    currentStyle:function(){
      if(this.isFourColumns === true){
        return {
          width:'25%'
        }
      }else{
          return {
          width:'20%'
        }
      }

    }
  },

提供 isFourColumns title imgUrl 暴露3个属性给外部
1、isFourColumns是否是4列如果是4列那么该item占比25% 如果是5列占比20% 用来适配4列5列
2、title 标题
3、imgUrl 图片的Url
然后父容器布局：
display: flex;横向布局
flex-wrap: wrap;可换行

 .mtItem-container-div {
    background: white;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    //   justify-content: space-between;
  }

轮播图 mt-swipe

image.png


    <mt-swipe :auto="4000">
      <mt-swipe-item
        v-for=' (item ,index) in swipeList '
        :key="index"
      >
        <img
          :src='item.imgUrl'
          alt=""
        >
      </mt-swipe-item>
    </mt-swipe>

.mint-swipe {
    height: 180px;
  }

顶部滚动条

image.png

 <div
      id="slider"
      class="mui-slider"
    >
      <div
        id="sliderSegmentedControl"
        class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"
      >

        <!-- ：class 后面跟class 或表达式 -->
        <div class="mui-scroll">
          <a
            :class="['mui-control-item',index===0 ? 'mui-active' :'' ]"
            v-for='(item, index) in titleList'
            :key="index"
          >
            {{item}}
          </a>

        </div>
      </div>

    </div>

务必加上这个

image.png

  mounted() {
    mui(".mui-scroll-wrapper").scroll({
      deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    });
  },

要在mounted 的生命钩子函数里面初始化具体生命周期的如下：

1741752219-59c9b774a4ccf_articlex.png

缩略图
引用插件：vue-preview

缩略图

   <vue-preview
        :slides="slide1"
        @close="handleClose"
      >
      </vue-preview>

 slide1: [
        {
          src:
            "http://img.zcool.cn/community/0103e955b07a0a6ac7258178301cdb.jpg@1280w_1l_2o_100sh.jpg",
          msrc:
            "http://img.zcool.cn/community/0103e955b07a0a6ac7258178301cdb.jpg@1280w_1l_2o_100sh.jpg",
          alt: "picture1",
          title: "Image Caption 1",
          w: 600,
          h: 400
        },]

这个布局很关键，直接影响显示不显示（个人认为这个点vue-preview 处理的不友好）

  .thumbs {
    /deep/ .my-gallery {
      display: flex;
      flex-wrap: wrap;
      figure {
        width: 20%;
        margin: 5px;
        img {
          width: 100%;
        }
      }
    }
  }

本文不涉及到vue的基础如需要看官网
vue官网
我对vue也是小菜鸟好多东西也还没搞明白网上看了一张学习路线图分享给大家

26912fd6f8116bbc275532b3e7ae6a7b.jpg

本期的高仿美团VUE<1>记录先到这里了。

源码地址>>>
项目运行：

npm install

npm run serve

欢迎点赞和关注，同时也欢迎提出问题一起探讨。

2020-07-21