scroll behavior
Develop a product detail page?
1. Static components
But for this details page, we have not registered as a route
When clicking on the product picture, it will jump to the details page, and the ID of the product needs to be brought to the details page when the route jumps
Get rid of the a label and replace it with the router-link label 
One thing to note here is that we need to pass parameters to it
One thing to mention here is the problem of the scroll bar. When we are at the lowest end of the browser, the scroll bar is also at the lowest end. When we perform routing jumps, the scroll bar should not be at the lowest end
Here we are going to use this scrolling behavior | Vue Router (vuejs.org)
it's done
scrollBehavior (to, from, savedPosition) {
return { y: 0 }
}2. Send request
3. vuex
4. Dynamic display components
Product details data acquisition
Take a look at the docs /api/item/{ skuId }
Then go to create a warehouse. In vuex, you need to add a new module detail, and you need to go back to the big warehouse for merging
Then dispatch the data
state gets the data
Product details display dynamic data
The currently calculated categoryView attribute value is at least an empty object, and there will be no false errors
In the same way, fish out the skuInfo and display it on the page
Pager review
1. What is the packaging principle of the pager?
Know the current page, pageNo
Know how many pieces of data the pager needs to display in total: total
Know the number of data that needs to be displayed on each page: pageSize---[how many pages in total]
Know consecutive page numbers 5|7
2. For the pager
For example, the current page is 5
3 4 5 6 7
For example: the current page is 8
6 7 8 9 10
3. What needs to be considered for the pager situation?
Current project: number of consecutive pages -----5 (implicit condition, pager must have at least five pages)
4. Special circumstances are taken into consideration
pageNo:1
1 2 3 4 5
pageNo:2
1 2 3 4 5
pageNo:33 ---[33 in total]
31 32 33 34 35 =》29 30 31 32 33
pageNo:32---[32 in total]
30 31 32 33 34=》29 30 31 32 33
zoom magnifying glass display data
These are the data in our skuInfo
And we have already encapsulated the skuInfo data before, now we just need to grab it and put it on the page
Pass data from parent to child, using custom attributes
Then the data is received in the subcomponent, but an error is reported. It says that 0 is not defined when rendering. Because the data given by the father is an underfined. We can't give him an underfined but just give him a []
Then reported an imgurl error
Q Does the empty array have the attribute imgUrl?
So we have to process
The detail routing component displays product sales attributes
The small picture below is the same as the one above, copy and paste
Then render the data to the page
Simplify product sales attributes and render them on the page
That's it
Product sales attribute value exclusive operation
It is the part above, we click on itself to make him highlight. The rest of the brothers are not highlighted. standard exclusivity
Here we define an event and pass two values, the first one is the attribute of click sale. The second is an array of vending attributes
That's it
changeActive(saleAttrValue,arr){
console.log(arr);
// 遍历全部的售卖属性isChecked为0就没有高亮了
arr.forEach(item=>{
console.log(item);
item.isChecked='0'
})
// 点击的那个售卖属性
saleAttrValue.isChecked='1'
}