<> Implementation idea of detail page

Click the product to go to the details page , More detailed information according to click request , It's coming goodsItem Of iid, according to id Go to the server and ask for more details ; Configure route mapping relationships , Click to jump , Pass jump with parameters
itemClick(){ this.$router.push('/detail/'+this.goodsItem.iid) /*
this.$router.push({ path:'/detail', query:{ iid:this.goodsItem.iid } }) */ }

But what we got iid There is no change when the click item is replaced , No new requests , Because of a route jump ,router-view from keep-alive Wrapped , It will not be destroyed and recreated every time , So they won't iid Give new value , Do not use details page keep-alive, use exclude attribute
<keep-alive exclude="Detail"> <router-view></router-view> </keep-alive>
<> The location of the home page remains the same

Specified version installation better-scroll npm install better-scroll@1.13.2 --save

use keep-alive Label handle router-view Label wrap , Click other navigation bar , Click home again , Auto back to top , It's not about creating a new Home.vue, Get where to scroll when leaving , Set the saved location when entering again .【 Frequent switching will automatically return to the top ???】

<> Encapsulation of navigation bar

1. stay childComps Create component in DetailNavBar.vue, Introduce common components into components TabBar, replace TabBar Slots in components , On the details page Detail The encapsulated navigation bar is introduced in DetailNavBar,
2. Introduce a return Icon , Bind click event , Click to return to the previous status
3. Define the title in the navigation bar as an array titles Then traverse , conduct flex layout
4. Who to click on the title , Whoever turns red
** Define a current index currentIndex, Dynamic binding class, Dynamic binding click event 【 Can I import directly here tabControl assembly ??】

<> Add scrolling effect Scroll

1. Specified version installation better-scroll npm install better-scroll@1.13.2 --save
2. Bottom navigation bar of detail page NavBar No need to show , You can lay out the details page relative to each other and set the hierarchy , Give a white background color , The details page can be separated from the original standard flow , Hide the bottom navigation bar
3. The top navigation bar is DetailNavBar Set relative positioning hierarchy and background color in component
4. Still choose better-scroll, Encapsulated before reference Scroll, Use what you want to roll scroll Wrap up , replace Scroll Slot inside
5.scroll Fixed height required , Let the parent element have 100% Viewport height for

<> One , Rolling problems

Recommended data use goodslistitem On display , Used load monitor , Notify the home page when the picture is loaded , But we don't need to notify the front page . We need to differentiate . Make a routing judgment when sending an event .
imageLoad(){ if(this.$router.path.indexOf('/home')){ this.$bus.$emit(
'homeItemImageLoad') } else if(this.$router.path.indexOf('/detail')){ this.$bus.
$emit('detailItemImageLoad') } },
Then on the details page, monitor whether the image is loaded , But when we finally leave, we have to cancel

<> Detail data request

1. Save the imported iid
2. according to iid Request detail data
** stay network Of detail.js Middle package getDetail, Make a network request

<> One , The encapsulation of carousel chart

stay childComps Create component in DetailSwiper.vue, Introduce common components into components Swiper,SwiperItem, On the details page Detail In the package DetailSwiper
* Requested data topImages Show goods in turn , A variable is defined , hold topImages Save , The picture is too big , to swiper Set fixed height
<> Two , Packaging of basic information of commodity

* Data required to extract components , Then transfer the extracted data to the component , Integrate clutter into one object , export class Class object Goods Some product information saved
stay childComps Create component in DetailBaseInfo.vue, Package some basic product information , On the details page Detail In the package DetailBaseInfo
* To determine whether there is commodity information , With re rendering , How to judge ?
* v-if="Object.keys(goods).length !== 0" see goods Is it an empty object
<> Three , Encapsulation of basic information of merchants

* export class Class object Shop Some product information saved
* stay childComps Create component in DetailShopInfo.vue, Package some business information , On the details page Detail In the package DetailShopInfo
* When displaying total sales volume , There's a filter filters: { sellCountFilter: function (value) { if (value <
10000) return value; return (value/10000).toFixed(1) + ' ten thousand ' } }
<> Four , Packaging of product details

stay childComps Create component in DetailGoodsInfo.vue, Package some product details , On the details page Detail In the package DetailGoodsInfo
* In the process of rolling , It may not roll , Because better-scroll When calculating the scroll area , The picture hasn't been loaded yet , So we need to monitor whether the image is loaded
* The number of pictures to get from the homepage , Then define a count variable , When the two are equal , You can send out the event that the image loading is completed ,
* In the details page , Refresh scrolling area // monitor detailInfo The change of this object watch:{ detailInfo(){ // Number of pictures obtained this
.imageLength=this.detailInfo.detailImage[0].list.length } }, methods: {
imageLoad(){ // Let's judge , One event only , Otherwise, a few pictures will send out several events // After all the pictures are loaded , Make a callback if(++this.
counter===this.imageLength){ this.$emit('imageLoad') } } },
<> Five , Packaging of commodity parameters

* export class Class object GoodsParam Some product parameter information saved
stay childComps Create component in DetailParamInfo.vue, Encapsulate some product parameter information , On the details page Detail In the package DetailParamInfo
* For parameters table layout
<> Six , Packaging of product comment information

* Access to comment information
** On the interface result->rate inside
** cRate How many comments are there on the current product Click more to jump to another page Show more comments
** list[0] Take out a comment and display it on the details page
** definition commentInfo object Save the extracted comment information May not have comment information Judge first
* Display of comment information
stay childComps Create component in DetailCommentInfo.vue, Encapsulate some comments , On the details page Detail In the package DetailCommentInfo
** Filter format time formatDate from utils Introduced in filters: { showDate: function (value) { //
Convert timestamps to Date object let date = new Date(value*1000); // take date Format return formatDate(
date, 'yyyy/MM/dd') } }
<> Seven , Packaging of product recommendation information

* Acquisition of recommendation data
** stay detail.js Middle lane interface , No need to transfer parameters export function getRecommend() { return request({
url: '/recommend', }) }
** Import interface functions in details page , Define a recommends array , stay created Request recommendation data in

* Presentation of recommended data
** No need to create a new subcomponent , It can be used directly GoodsList assembly ,
** Import in details page GoodsList Component and register to use
** Get a calculation property computed, Take the displayed picture data
<> The home page and details page monitor global events mixin Use of

** mixin Mix in

<> bottom toolbars

<> One , Encapsulation of bottom toolbar

<> Two , Add item to cart

** 1. to “ add to cart ” Add click event , Send an event , Because it's listening in subcomponents ,
** 2. Monitor click in details page , Get product information first , This information will be displayed on the shopping cart page ;
** 3. Add item to cart , Add items to a location on the details page , Display information in shopping cart interface , be used vuex
addToCart(){ // 1. Get the information that shopping cart needs to display const product={} product.image=this.topImages[0]
product.title=this.goods.title product.desc=this.goods.desc product.cartPrice=
this.goods.cartPrice product.iid=this.iid // 2. Add item to cart this.$store.dispatch(
'addCart',product) }
<> Three , Add item to store in

** 0. install vuex npm install vuex --save
** 1. In folder store Create a new file in , Import vue,vuex, Install plug-ins , establish store object , Mount to Vue On the instance , stay main.js Import in store
2. Define an array variable cartList Store goods in it , Modify any state All States in must pass mutations,mutations The events completed by each method in are as single as possible
[ADD_COUNTER](state, payload) { payload.count++; }, [ADD_TO_CART](state,
payload) { state.cartList.push(payload); }
** 3. Logical judgment in actions in
addCart(context, payload) { // 1. Find whether the item exists in the previous array let oldProduct = context.state.
cartList.find( item => item.iid === payload.iid ); // 2. judge oldProduct if (
oldProduct) { context.commit(ADD_COUNTER, oldProduct); } else { payload.count =
1; context.commit(ADD_TO_CART, payload); } }
<> Four , Add shopping cart pop up

** 1. stay components Of common Create a new folder toast folder , Because it can also be used in other projects , Create a Toast assembly ,
** 2. Center the pop ups vertically and horizontally ,
3. Control the display and hiding of pop ups ,v-show Define a variable isShow, Do not display by default , Property value set to false, It also defines the variables of pop-up display content message, click “ add to cart ” Back display , In a moment , Use timer
** 4. stay Detail Import in component , Register and use
** 5. click “ add to cart ” Back display , In a moment , Use timer
if (oldProduct) { context.commit(ADD_COUNTER, oldProduct); resolve(' Current product quantity +1')
} else { payload.count = 1; context.commit(ADD_TO_CART, payload); resolve(
' Successfully added shopping cart ') } this.$store.dispatch('addCart',product).then(res=>{ this.isShow=
true; this.message=res setTimeout(() => { this.isShow=false; this.message='' },
Another package :
** 0. Encapsulate this component in a plug-in , Create this component first , Add this component to the body inside , Then install the plug-in , Install this plug-in and you are ready
** 1. stay main.js Import in file toast, Install plug-ins , implement install function ,
** 2. stay toast New in folder index file , stay index Import in Toast assembly , stay install Function to prepare what you need
obj.install=function(Vue){ // 1. Create component builder const toastContrustor = Vue.extend(
Toast) // 2.new How , Build from component , You can create a component object const toast = new toastContrustor() //
3. Component object , Mount to an element manually toast.$mount(document.createElement('div')) //
4.toast.$el The corresponding is div document.body.appendChild(toast.$el) Vue.prototype.$toast =
** 3. stay Toast Write a show method
show(message,duration=2000){ // duration=duration || 3000 this.isShow=true;
this.message=message setTimeout(() => { this.isShow=false; this.message='' },
duration); }
** 4. stay Detail Call in component show method
this.$store.dispatch('addCart',product).then(res=>{ this.$toast.show(res,2000)

©2019-2020 Toolsou All rights reserved,
It's unexpected Python Cherry tree (turtle The gorgeous style of Library ) Some East 14 Pay change 16 salary , Sincerity or routine ? Browser kernel ( understand )java Four functional interfaces ( a key , simple )HashMap Explain in detail html Writing about cherry trees , Writing about cherry trees os Simple use of module