Click the product to enter the detail page: GoodListItemclick, click to get the iid of the product, and pass in the iid
Implementation details page navigation bar: nav-barcomponents, including back button and title list, select left slot and center slot
Request detailed data: Interface:/detail?iid=
The realization of the carousel diagram, throughSwiper/SwiperItem
The display of the basic information of the product: Optimize the code, and the data comes from all directions. The required data is aggregated into an object and then the object is passed to the sub-component.
Store information display
Display of product pictures
Display of parameter information
Display of comment information: the issue of time formatting
Recommended data display: request recommended data, GoodList display data
Which modules are included: nav-bar component (reusable) scroll component (introducing a plug-in for scrolling), the shopping cart component DetailBottomBar is added at the bottom, and there are four major parts: commodities, parameters, comments, and recommendations . Product section : DetailSwiper (including the carousel display of product detail pictures) DetailBaseInfo component (including product name, price, discount, some services provided, etc.) DetailShopInfo (including store name, some evaluation indicators, etc.) DetailGoodsInfo (product detail page picture display) ) Parameter part : DetailItemParams (implemented through a table, including product size information) Comment part : DetailCommentInfo (including product comments) Recommendation part : Introduce the GoodList component, and call the getRecommend method encapsulated in the axios instance.
Mainly realized interaction: (1) Click and jump to the corresponding module, namely the linkage effect of the title. (2) Add to shopping cart
The realization of the idea of interaction 1.
Monitor the click of the title in the detail to get the index
Pass values between parent and child components through props
Obtain the offsetTop value corresponding to the four components of product, parameter, comment, and recommendation . In this process, how to directly manipulate subcomponents and get the offsetTop of the component is involved. Directly manipulate sub-components, through , ref is used to register reference information for DOM elements or sub-components. The reference information will be registered according to the refs object of the parent component. If used on ordinary DOM elements, the reference information is the element; if used on subcomponents, the reference information is the component instance , and ref must be available after the dom rendering is completed, and it is not responsive, and can be in the life cycle hook call or in call. Reference: Vue and ref properties are different from refs , offsetTop and scrollTop . The use of refs and el in VUE is used to obtain OffsetTop. The component is not a DOM element and does not have OffsetTop. It cannot be obtained by clicking .OffsetTop. You need to use $el to get the DOM elements in the component:$refsmounted(){}this.$nextTick(()=>{}) this.$refs.recommend.$el.offsetTop
Problem: Where can I get the correct offsetTop
created: No, the element cannot be retrieved at all
mounted: No, the data has not been obtained yet. When rendering each child component, use v-if to render when the data request arrives. After the parent component asynchronously requests the data through the getDetail method in the encapsulated axios instance, the value is passed to each child component through props. Because it is an asynchronous request, if the data request has not been completed, the sub-component has not been rendered yet, and the data cannot be obtained in mounted at this time.
The callback for getting the data is also not good, that is, it is placed in the .then of the getDetail method, and the variable value of each passed-in subcomponent is assigned to calculate. Although the value has been assigned at this time, the rendering also takes a certain time, that is, the DOM is still It hasn't been rendered, so it doesn't work either. Can be considered in the updated hook, as long as there is a data update, this life hook will be executed once
$nextTickNo, because the height of the picture is not included, resulting in inaccurate values. $nextTickThe delayed callback is executed after the next DOM update cycle is over . The DOM change occurs after nextTick(). After modifying the data $nextTick, you can get the updated DOM in the callback, so $nextTickthe function is when the data is modified Later, use this method to call back to get the updated DOM and then render it . Reference: this.$nextTick() simply understand nextTick in Vue
After the image is loaded, the obtained height is correct. The scrolling plug-in is also used on the dedail page. Like the home page, a method is set to update the image after loading. Call the method to get offsetTop in this method, you can get the correct height
The realization of interactive idea 2:
Monitor the click of the button to add to the shopping cart, and obtain product information: iid/price/title, etc., and aggregate them into one object
Add items to vuex, define mutations and actions, etc., call the method of mutations: this.$store.commit('addCart', product); call the method of actions: this.$store.dispatch('addCart', product). The operation of adding a product is implemented in actions. By creating a promise object, using oldProduct to save the newly passed product object, if the product already exists before, only increase the quantity context.commit(ADD_COUNTER, oldProduct), if it does not exist, add it to the product list context.commit(ADD_TO_CART, payload), two methods ADD_COUNTE and ADD_TO_CART are defined in the mutation, because the modification of the state must be realized through the mutation
The sibling components, that is, pass the value between the detail component and the cart component through vuex
Code optimization to achieve category encapsulation. When calling back-end data, sometimes the data displayed in a sub-component needs to be stored in different categories. For the convenience of calling, create the corresponding class through class in detail.js, and then create and save the product through new Goods in the Detail component Information object, create an object to save shop information through new Shop, etc. Then directly pass these objects into the corresponding sub-components