I. Project Presentation:

Note: if the GIF is not viewable, please click itGithub Meituan projectMt-app/SRC /assets/ meituan.gif can be viewed!

This project is very suitable for vUE beginners, if business logic do not understand, welcome to discuss!

Source address: MT-app, welcome star and fork

If it helps you in any way, please like me and follow me

Ii. Technology stack involved in the project:

  • Vue family bucket: VUE, vue-Router, vue-CLI, etc
  • Componentization: single Vue file
  • Module: ES6 Module
  • Third-party modules: Better-Scroll AXIos, etc
  • Basic development environment and package management: Node, NPM
  • Build tool: Webpack
  • Editor: Webstrom

Iii. Main Functions of the project

In a word: a mobile endpoint food APP that combines ordering, user reviews and business information

  1. The order page will automatically add the selected goods to the shopping cart, and calculate the total price. The number can be increased or decreased at will in the commodity list, shopping cart list and commodity details page. In addition, the left commodity category and the right commodity category are related to each other, and the corresponding commodity category will also jump when the better Scroll plug-in slides the commodity list.
  2. The user evaluation page mainly includes a TAB bar, including three parts: all, there are pictures and evaluation three modules
  3. The business information page mainly introduces some basic business information. You can use the Better-Scroll plug-in to scroll the picture left and right

4. Project difficulties

The business logic of the project mainly focuses on the ordering module, and the difficulty in the ordering module is how to realize the sliding of the commodity list, and how to link the commodity classification on the right and the commodity list on the left.

First of all, to achieve the sliding of the list of goods, we need to use a Better-Scroll plug-in, which focuses on solving the needs of various scrolling scenes on mobile terminals (supported by PC).

  • Install the better – scrollnpm install better-scroll --save
  • Script is introduced in the good. vue fileimport BScroll from 'better-scroll'

After these preparations are completed, the left and right lists are linked, which can be summarized as follows: 1. Calculate the interval height of commodity classification

/ / template section <! --> <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">...Copy the code
The methods / / JS parts: {calculateHeight() {// Calculate the total height of the classification interval (including the total height of the special and all specific classification)let foodlist = this.$refs.foodScroll.getElementsByClassName("food-list-hook")
        let height = 0
        this.listHeight.push(height)
        for (let i = 0; i < foodlist.length; i++) {
          letItem = foodList [I] height += item.clientheight // add 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, {// instantiate 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(() => {// In created, data is initialized, but the DOM is not generated, the page is not displayed, to use the callback function, Make sure DOM is updated this.initscroll () // execute the scroll method this.calculateHeight() // call the method that calculates the height of the classification interval})}})}Copy the code

2. Listen for the scroll position

initScroll() {
        this.menuScroll = new BScroll(this.$refs.menuScroll)
        this.foodScroll = new BScroll(this.$refs.foodScroll, {probeType: 3, // Send scroll event click:true}) //foodScroll monitor event this.foodscroll. On ("scroll", (pos) => {
          this.scrollY = Math.abs(pos.y)
          console.log(this.scrollY)
        })
      }
Copy the code

3. Confirm the subscript according to the scroll position corresponding to the left

computed:{
    currentIndex() {for(let i = 0; i < this.listHeight.length; i++){
        let height1 = this.listHeight[i]
        letHeight2 = this.listHeight[I +1] // Get the range of goodsif(! height2 || (this.scrollY >= height1 && this.scrollY < height2)){returni; }}return0}Copy the code
        <li class="menu-item"
          :class="{'current':currentIndex === 0}"// Dynamically bind a style,.current sets the style @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)"
            >
Copy the code

4. Click left and scroll right by subscript

<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)">// The same function passes different valuesCopy the code
 selectMenu(index) {
        let foodlist = this.$refs.foodScroll.getElementsByClassName("food-list-hook")
        let element = foodlist[index]
        this.foodScroll.scrollToElement(element, 250)
      }
Copy the code

V. Project summary

  • The separation of vUE data and view, data-driven view, only care about data changes, DOM operations are encapsulated, greatly improve efficiency in the actual development process.
  • The componentalization function of Vue is one of its highlights. By putting HTML, CSS and JS codes of a component on a page into a. Vue file for management, the maintainability of the code can be greatly improved.
  • Mobile terminal adaptation is not done in the project. If it is opened on mobile phones with different screens, the user experience may be poor