Vue’s Family Barrel Makes an Exquisite Art Troupe Project

  Front end, javascript, node.js, Programmer, vue.js

I. Project Display:


Note: If the gif animation cannot be seen, please clickGithub group projectGif!

This project is very suitable for vue beginners. If you cannot understand the business logic, you are welcome to discuss it together!

Source code address:mt-app, welcome star and fork

If it is of some help to you, please praise and pay attention to me.

Second, the project involves technology stack:

  • Vue family barrel: vue, Vue-router, Vue-cli etc.
  • Component: Single Vue File
  • Modularization: ES6 Module
  • Third party modules: better-scroll axios, etc.
  • Basic Development Environment and Package Management: Node, npm
  • Building tools: webpack
  • Editor: webstrom

III. Main Functions of the Project

In a word: a mobile endpoint meal APP that integrates ordering, user evaluation and business information.
1. Ordering page
After clicking on a commodity, it is automatically added to the shopping cart and the total price is calculated. The number can be increased or decreased at will in the commodity list, shopping cart list and commodity detail page. In addition, the commodity classification on the left and the commodity on the right are interrelated. When sliding the commodity list through the better-scroll plug-in, the corresponding commodity classification will jump.
2. User Evaluation Page
Mainly includes a TAB column, including three parts: all, maps and evaluation of the three modules
3. Merchant Information Page
This article mainly introduces some basic information of merchants. You can slide the picture left and right through the better-scroll plug-in.

IV. Difficulties in the Project

The business logic of the project is mainly focused 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 right commodity classification with the left commodity list.

First of all, to realize the sliding of the commodity list, you need to use a better-scroll plug-in. better-scroll is a plug-in that focuses on solving the needs of various scrolling scenes on the mobile terminal (supported PC).

  • Install better-scrollnpm install better-scroll --save
  • Script introduction in Good.vue fileimport BScroll from 'better-scroll'

After these preparations have been completed, the linkage of the left and right lists will be realized. In summary, there are four steps as follows:
1. Calculate the interval height of commodity classification

//template section
 <!  -list of goods->
 <div class="foods-wrapper" ref="foodScroll">
 <!  -special performance->
 <li class="container-list food-list-hook">
 <div v-for="(item,index) in container.operation_source_list" :key="index">
 <img :src="item.pic_url">
 <!  -specific classification->
 <li v-for="(item,index) in goods" :key="index" class="food-list food-list-hook">
 <h3 class="title">{{}}</h3>
 <!  -specific list of goods->
 <li v-for="(food,index) in item.spus" :key="index" @click="showDetail(food)" class="food-item">
//JS section
 CalculateHeight() {// Calculate the total height of the classification interval (including the total height of special events and all specific classifications)
 let foodlist = this.$refs.foodScroll.getElementsByClassName("food-list-hook")
 let height = 0
 for (let i = 0;   i < foodlist.length;  i++) {
 let item = foodlist[i]
 Height += item.clientHeight // accumulation
 console.log(this.listHeight)//[0, 43, 1231, 2401, 3589, 4451, 6121, 7656, 8497, 9344, 10080]
 initScroll() {
 This.menscrull = newbcolll (this. $ refs.menscrull, {//instantiated
 Click: true // click event to take effect
 this.foodScroll = new BScroll(this.$refs.foodScroll, {
 probeType: 3,
 click: true
 created() {
 .then(res => res.json())
 .then(response => {
 if (response.code == 0) {
 this.container =
 this.goods =
 this.poiInfo =
 This.$nextTick(() => {// although data has been initialized in created, dom has not been generated and the page has not yet been displayed. use callback function to ensure DOM has been updated
 Init scroll ()//execute scroll method
 This.calculateHeight() ///call the method to calculate the height of the classification interval.

2. Monitor the scroll position

initScroll() {
 this.menuScroll = new BScroll(this.$refs.menuScroll)
 this.foodScroll = new BScroll(this.$refs.foodScroll, {
 ProbeType: 3,//distribute scroll events in real time during screen sliding.
 Click:true// click event to take effect
 ///foodScroll listening events
 this.foodScroll.on("scroll", (pos) => {
 this.scrollY = Math.abs(pos.y)

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

 for(let i = 0;   i < this.listHeight.length;  i++){
 let height1 = this.listHeight[i]
 Lethheight 2 = this.listheight [i+1]//obtains the range of commodity intervals
 if(!  height2 || (this.scrollY >= height1 && this.scrollY < height2)){
 return i;  //Is it in the above interval
 return 0
<li class="menu-item"
 : class = "{'current': currentindex = = = 0}"//dynamically bind a style. current sets the style
 <p class="text">
 <img class="icon" :src="container.tag_icon" v-if="container.tag_icon">
 <li class="menu-item"
 :class="{'current':currentIndex === index + 1}"
 v-for="(item,index) in goods" :key="index"

4. Click left and scroll right through 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 has different values
selectMenu(index) {
 let foodlist = this.$refs.foodScroll.getElementsByClassName("food-list-hook")
 let element = foodlist[index]
 this.foodScroll.scrollToElement(element, 250)

V. project summary

  • The separation of vue data and views drives views with data, only cares about data changes, DOM operations are encapsulated, and the efficiency is greatly improved in the actual development process.
  • Vue’s componentization function is one of its highlights. The maintainability of the code can be greatly improved by putting html, CSS and JS codes of a certain component on the page into a. vue file for management.
  • The mobile terminal is not adapted in the project, and the user experience may be worse if the mobile terminal is opened on a mobile phone with different screens.