1. Mall app
1. When the interface does not return the latest product data and clicks [Buy Now] to check the inventory when the interface does not return the latest product data, the actual parameters are still the parameters of the previous specification passed when uploading the parameters.
Solution: After the specification information interface call is completed and the latest data is returned, you can click to configure [Buy Now]. A mask layer needs to be added to control the click of the button.
2. When encapsulating the Tabbar, the Tabbar information is returned by the list interface on the home page, but the list passed by the parent component is printed in the child component, but it is 'null'.
Reason: When the project starts, the execution order of parent-child components is
parent beforeCreate->parent created->parent beforeMount->child beforeCreate->child created->child beforeMount->child mounted->parent mounted
So, before the child component is mounted, After the parent component is mounted, when the data is echoed, the api data obtained in the parent component mounted cannot be passed to the child component at the beginning, so the data passed in the child component is 'null', when The parent component gets the data of the api, updates the data passed to the child component, and then passes it to the child component, and the child component can get the data.
Solution: In the subcomponent, monitor the passed data, and perform logical operations when the passed data is not 'null'.
3. The TabBar information is returned by the home page interface. The TabBar is also needed on the shopping cart and other pages, but calling the home page interface on each page is a bit of a fuss, and because of the interface return time problem, the TabBar at the bottom will flicker.
Solution: The mall displays the homepage by default. Obtain the TabBar navigation information on the homepage, pass it into the subcomponent, store it in the local cache or vuex in the subcomponent, and use the data stored in the cache when the component is rendered. There is still a problem that it has not been stored in the local cache when it is rendered for the first time, so it needs to judge whether there is this data in the local cache, use it if it is, and use the data passed from the homepage if it is not.
4. Use the swiper plug-in for carousel. When setting the loop to rotate, the click event of the first picture in the second carousel will be invalid.
Reason: In loop mode, swiper will copy the first and last picture of the carousel list, but will not copy the click event of the dom node, so when the second carousel occurs, the click event of the first picture will be invalid.
Solution:
Use the click event listener that comes with the swiper plug-in instead of adding a click event to the image.
