In the previous part, we completed the menu bar and commodity display structure, and this time we access data for these two parts.

Menu bar access data

Import components and define the required data format

<script>
// Import BScroll components
import BScroll from "better-scroll";
// Import Food product page
import Food from "components/Food/Food";

export default {
  data() { //Prepare the required data and initialize the components.
    return {
      container: {},
      goods: [],
      poiInfo: {},
      listHeight: [],
      scrollY: 0,
      menuScroll: {},
      foodScroll: {},
      selectedFood: {}
    };
  },
    //Reference component
  components: {
    BScroll,
    Food
  }
};
</script>

Request to get data through the created hook

As we said before, in the created hook and the mounted hook, you can initiate a request to request the required data. This time, we launch a get request in the created hook to get the data.

  created() {
    //Change the direction of this in. then by that
    var that = this;

    // get request via axios
    this.$axios
      .get("/api/goods")
      .then(function(response) {
        // Get data
        var dataSource = response.data;
        if (dataSource.code == 0) {
          that.container = dataSource.data.container_operation_source;
          that.goods = dataSource.data.food_spu_tags;
          that.poiInfo = dataSource.data.poi_info;

          // Call the initialization method of scrolling
          // that.initScroll();
          // At the beginning, DOM elements did not render, that is, height was the problem
          // After getting the data, and DOM has been rendered, indicating that the list height is OK.
          // nextTick
          that.$nextTick(() => {
            // DOM updated
            that.initScroll();

            // Calculate the height of classification interval
            that.calculateHeight();
          });
        }
      })
      .catch(function(error) {
        // Error handling
        console.log(error);
      });
  },

Note the use of $nextTick(), after dom update. We perform the initialization scroll function.

https://cn.vuejs.org/v2/api/#...

Define the methods we need through methods

• The background image of the product is obtained by the head BG (imgname) method.
• The initScroll() method is used to initialize scrolling. https://cn.vuejs.org/v2/api/#ref;
• The calculateHeight() method gets the elements of each menu column on the left;

• Using the selectMenu() method, after we click the menu, the corresponding product information will be displayed on the right side;

  methods: {

  head_bg(imgName) {
    return "background-image: url(" + imgName + ");";
  },
  // Initialization of scrolling
  initScroll() {
    // The ref attribute is used to bind a dom element or component, and then in this.$refs
    this.menuScroll = new BScroll(this.$refs.menuScroll, {
      click: true
    });
    this.foodScroll = new BScroll(this.$refs.foodScroll, {
      probeType: 3,
      click: true
    });
  
    // Add rolling listening event
    this.foodScroll.on("scroll", pos => {
      this.scrollY = Math.abs(Math.round(pos.y));
    });
  },
  calculateHeight() {
    // Get the corresponding element through $refs
    let foodlist = this.$refs.foodScroll.getElementsByClassName(
      "food-list-hook"
    );
  
    // Add to array range
    // 0 ~ 216 first interval (special session)
    // 217 ~ 1342 the second interval (hot sale)
    let height = 0;
    this.listHeight.push(height);
    for (let i = 0; i < foodlist.length; i++) {
      let item = foodlist[i];
  
      // accumulation
      height += item.clientHeight;
  
      this.listHeight.push(height);
    }
  },
  selectMenu(index) {
  
    let foodlist = this.$refs.foodScroll.getElementsByClassName(
      "food-list-hook"
    );
  
    // Scroll to the corresponding element according to the subscript
    let el = foodlist[index];
    // Scroll to the location of the corresponding element
    this.foodScroll.scrollToElement(el, 250);
  }

  },

computed definition properties

• The currentIndex attribute is bound to the left menu bar, so that the menu element and the right content are displayed to the user.

  computed: {

  currentIndex() {
    // Determine the corresponding index subscript according to the right scrolling position
    for (let i = 0; i < this.listHeight.length; i++) {
      // Get range of commodity range
      let height1 = this.listHeight[i];
      let height2 = this.listHeight[i + 1];
  
      // Is it in the above range?
      if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
        return i;
      }
    }
  
    return 0;
     }
   },
  

Above we have completed the interaction of product page data. Next we will add the product control and shopping cart.