[vue/axios/vue-router] Сделайте изысканный проект Meituan

внешний интерфейс Vue.js axios vue-router

1. Дисплей проекта:

美团

Примечание. Если вы не видите динамическое изображение в формате gif, нажмитегитхаб мейтуан проектВы можете посмотреть его в mt-app/src/assets/Meituan.gif!

Этот проект очень подходит для начинающих Vue.Если вы не понимаете бизнес-логику, вы можете обсудить это вместе!

Адрес источника:mt-app, добро пожаловать в звездочку и форк

Если это вам немного поможет, ставьте лайк и подписывайтесь на меня.

2. В проекте задействован стек технологий:

  • Сегмент семейства Vue: Vue, Vue-router, Vue-cli и т. д.
  • Компоненция: один файл Vue
  • Модульный: Модуль ES6
  • Сторонние модули: аксиомы с лучшей прокруткой и т. д.
  • Базовая среда разработки и управление пакетами: Node, npm
  • Инструмент сборки: веб-пакет
  • Редактор: webstorm

3. Основные функции проекта

Одним словом: мобильное конечное приложение для еды, которое объединяет заказы, отзывы пользователей и бизнес-информацию.

  1. страница заказа После нажатия на товар он автоматически добавляется в корзину, и рассчитывается общая стоимость.Вы можете увеличивать или уменьшать число по желанию в списке товаров, списке корзины покупок и на странице сведений о товаре.Когда плагин прокрутки перемещает товар список, соответствующая категория продукта также будет прыгать.
  2. Страница отзывов пользователей Он в основном включает колонку TAB, включающую три части: все, с картинками и три модуля оценки.
  3. страница деловой информации В основном он представляет некоторую базовую бизнес-информацию.Вы можете перемещать изображение влево и вправо с помощью плагина для лучшей прокрутки.

4. Трудности проекта

Бизнес-логика этого проекта в основном сосредоточена в модуле заказа, и сложность в модуле заказа заключается в том, как реализовать скольжение списка продуктов и как связать классификацию продуктов справа и список продуктов слева?

Прежде всего, для реализации прокрутки списка товаров необходимо использовать плагин Better-Scroll, который фокусируется на решении потребностей различных сценариев прокрутки на мобильном терминале (ПК уже поддерживается).

  • Установить лучшую прокруткуnpm install better-scroll --save
  • Представлен скриптом в файле Good.vueimport BScroll from 'better-scroll'

После того, как эти приготовления выполнены, можно реализовать связь списка слева и справа.Подводя итог, можно выделить следующие четыре шага:1. Рассчитать высоту интервала товарной классификации

//template部分
  <!--商品列表-->
    <div class="foods-wrapper" ref="foodScroll">
      <ul>
        <!--专场-->
        <li class="container-list food-list-hook">
          <div v-for="(item,index) in container.operation_source_list" :key="index">
            <img :src="item.pic_url">
          </div>
        </li>
        <!-- 具体分类 -->
        <li v-for="(item,index) in goods" :key="index" class="food-list food-list-hook">
          <h3 class="title">{{item.name}}</h3>
          <!-- 具体的商品列表 -->
          <ul>
            <li v-for="(food,index) in item.spus" :key="index" @click="showDetail(food)" class="food-item">
            ......

//JS部分
methods:{
  calculateHeight() {   // 计算分类的区间总高度(包括专场和所有具体分类的总高)
        let foodlist = this.$refs.foodScroll.getElementsByClassName("food-list-hook")
        let height = 0
        this.listHeight.push(height)
        for (let i = 0; i < foodlist.length; i++) {
          let item = foodlist[i]
          height += item.clientHeight    // 累加
          this.listHeight.push(height)
        }
        console.log(this.listHeight)//[0, 43, 1231, 2401, 3589, 4451, 6121, 7656, 8497, 9344, 10080]
      }，
   initScroll() {
        this.menuScroll = new BScroll(this.$refs.menuScroll, {  //实例化
          click: true  //点击事件才能生效
        })
        this.foodScroll = new BScroll(this.$refs.foodScroll, {
          probeType: 3,
          click: true
        })
},
   created() {
      fetch("/api/goods")
        .then(res => res.json())
        .then(response => {
          if (response.code == 0) {
           this.container = response.data.container_operation_source
           this.goods = response.data.food_spu_tags
           this.poiInfo = response.data.poi_info 
           this.$nextTick(() => {  //在created中数据虽已初始化，但dom未生成，页面还没显示，要使用回调函数，确保DOM已经更新
           this.initScroll()        // 执行滚动方法
           this.calculateHeight() //调用计算分类区间高度的方法
            })
          }
        })
    }

2. Следите за положением прокрутки

initScroll() {
        this.menuScroll = new BScroll(this.$refs.menuScroll)
        this.foodScroll = new BScroll(this.$refs.foodScroll, {
          probeType: 3，//在屏幕滑动的过程中实时派发 scroll 事件
         click:true//点击事件才能生效
        })
        //foodScroll监听事件
        this.foodScroll.on("scroll", (pos) => {
          this.scrollY = Math.abs(pos.y)
          console.log(this.scrollY)
        })
      }

3. Подтвердите нижний индекс в соответствии с положением прокрутки, соответствующим левому

computed:{
    currentIndex(){
      for(let i = 0; i < this.listHeight.length; i++){
        let height1 = this.listHeight[i]
        let height2 = this.listHeight[i+1] // 获取商品区间的范围
        if(!height2 || (this.scrollY >= height1 && this.scrollY < height2)){
          return i;    // 是否在上述区间中
        }
      }
      return 0
    }

        <li class="menu-item"
          :class="{'current':currentIndex === 0}"//动态绑定一个样式，.current设置样式
          @click="selectMenu(0)">
          <p class="text">
            <img class="icon" :src="container.tag_icon" v-if="container.tag_icon">
            {{container.tag_name}}
          </p>
        </li>
        <li class="menu-item"
            :class="{'current':currentIndex === index + 1}"
            v-for="(item,index) in goods" :key="index"
            @click="selectMenu(index+1)"
            >

4. Щелкните слева и прокрутите вправо, подписавшись

<li class="menu-item" :class="{'current':currentIndex===0}" @click="selectMenu(0)">
<li class="menu-item" :class="{'current':currentIndex===index+1}" 
v-for="(item,index) in goods" :key="index" @click="selectMenu(index+1)">//同一个函数传值不一样

 selectMenu(index) {
        let foodlist = this.$refs.foodScroll.getElementsByClassName("food-list-hook")
        let element = foodlist[index]
        this.foodScroll.scrollToElement(element, 250)
      }

V. Резюме проекта

  • Разделение данных vue и представления, представление, управляемое данными, забота только об изменениях данных, операции DOM инкапсулированы, что значительно повышает эффективность фактического процесса разработки.
  • Функция компонентизации Vue может быть описана как одна из ее основных особенностей.Помещая код html, CSS и JS компонента на странице в файл .vue для управления, можно значительно улучшить удобство сопровождения кода.
  • В проекте нет адаптации для мобильных терминалов, и он может открываться на мобильных телефонах с разными экранами, а пользовательский опыт может быть плохим.
Категории