高仿美团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 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 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