因?yàn)樽罱鼊倓倢W(xué)習(xí)了下 VUE 所以想記錄下。

話不多說 先上幾張圖 看下效果。

首頁

發(fā)現(xiàn)頁

詳情

訂單

我的

接下來會(huì)說下整個(gè)的高仿美團(tuán)VUE<1>的實(shí)現(xiàn)過程

1、仿美團(tuán)VUE<1>是基于vue2.0 VueCli開發(fā)的。具體VueCli項(xiàng)目怎么搭建 現(xiàn)在有很成熟的文檔在這不做過多的贅述。建議官網(wǎng)看起>>>
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切換的實(shí)現(xiàn)：
引入：mui(不是標(biāo)準(zhǔn)的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">發(fā)現(xiàn)</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;
}

頭部：不隨著頁面的滾動(dòng)而滾動(dòng)

header

引用mintUI官網(wǎng)地址

  <mt-header
      fixed
      title="美團(tuán)"
    ></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>

一張圖片和一個(gè)p標(biāo)簽

<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個(gè)屬性給外部
1、isFourColumns是否是4列 如果是4列那么 該item占比25% 如果是5列占比20% 用來適配4列5列
2、title 標(biāo)題
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;
  }

頂部滾動(dòng)條

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 或表達(dá)式 -->
        <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>

務(wù)必加上這個(gè)

image.png

  mounted() {
    mui(".mui-scroll-wrapper").scroll({
      deceleration: 0.0005 //flick 減速系數(shù)，系數(shù)越大，滾動(dòng)速度越慢，滾動(dòng)距離越小，默認(rèn)值0.0006
    });
  },

要在mounted 的生命鉤子函數(shù)里面 初始化具體生命周期的 如下：

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
        },]

這個(gè)布局很關(guān)鍵，直接影響顯示不顯示 （個(gè)人認(rèn)為這個(gè)點(diǎn)vue-preview 處理的不友好）

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

本文不涉及到vue的基礎(chǔ)如需要看官網(wǎng)
vue官網(wǎng)
我對(duì)vue也是小菜鳥 好多東西也還沒搞明白 網(wǎng)上看了一張 學(xué)習(xí)路線圖 分享給大家

26912fd6f8116bbc275532b3e7ae6a7b.jpg

本期的高仿美團(tuán)VUE<1>記錄先到這里了 。

源碼地址>>>
項(xiàng)目運(yùn)行：

npm install

npm run serve

歡迎點(diǎn)贊和關(guān)注，同時(shí)也歡迎提出問題 一起探討。

2020-07-21