首頁(yè)

1. ul列表觸底加載更多數(shù)據(jù)
   使用外部UI庫(kù)mint-ui，infinite-scroll無(wú)限滾動(dòng)指令，實(shí)質(zhì)就是滾動(dòng)距底部一定距離，執(zhí)行方法進(jìn)行數(shù)據(jù)請(qǐng)求。
2. Foot組件的點(diǎn)擊切換和跳轉(zhuǎn)其他頁(yè)面

• Foot組件底部導(dǎo)航圖標(biāo).active切換
  遍歷列表生成底部導(dǎo)航圖標(biāo)，通過(guò)location.search拿到查詢參數(shù)，qs.parse( )解析得到CurIndex（默認(rèn)初始值0），動(dòng)態(tài)綁定class通過(guò)index==CurIndex判斷是否激活active類。
• 點(diǎn)擊跳轉(zhuǎn)
  click后，把點(diǎn)擊圖標(biāo)的index作為查詢參數(shù)放到location.href上實(shí)現(xiàn)跳轉(zhuǎn)。

methods: {
    changeNav(list, index) {
      location.href = `${list.href}?index=${index}`;
    }
}

列表頁(yè)（search.html）

1. top按鈕顯現(xiàn)
   監(jiān)聽(tīng)touchmove事件，document.doucumentElement.scrollTop > 200顯現(xiàn)
2. 點(diǎn)擊top按鈕滾動(dòng)到頂部的過(guò)渡效果
   使用第三方庫(kù)velocity-animate

import Velocity from 'velocity-animate'

toTop(){
  Velocity(document.body,"scroll"，{duration: 1000})
}

vue組件通信的方式

1. down-props
2. 自定義事件 $emit()
3. 全局事件bus
4. vuex 狀態(tài)管理

個(gè)人主頁(yè)/收貨地址管理

1. 路由配置
   嵌套路由，在個(gè)人主頁(yè)里面還嵌套有子路由

let routes = [{
  /* 路由配置 */
  path:'/',
  component: member,
},{
  path: '/address',
  component: address,
  /* 嵌套路由 */
  children:[{
    path: '',
    redirect: 'all' /* 重定向跳轉(zhuǎn)到/all */
  },{
    name:'all',
    path:'all',
    component:all,
  },{
    name: 'form',
    path:'form',
    component:form,
  }]
}]

2. 路由跳轉(zhuǎn)的方式

• 聲明式導(dǎo)航 （router-link 動(dòng)態(tài)綁定to屬性）
  <router-link :to="{name:'form' ,query:{type:'add'}}">
• 編程式導(dǎo)航（this.$router）
  除了使用<router-link>創(chuàng)建 a 標(biāo)簽來(lái)定義導(dǎo)航鏈接，我們還可以借助 router 的實(shí)例方法，在 Vue 實(shí)例內(nèi)部，你可以通過(guò)$router訪問(wèn)路由實(shí)例

toEdit(list){
  // this.$router.push({path:'/address/form'})
  // 編程式導(dǎo)航
  this.$router.push({name:'form',query:{
      type: 'edit',
      instance: list,
  }})
},

• 總結(jié)：
  不論是聲明式導(dǎo)航還是編程式導(dǎo)航，獲取路由跳轉(zhuǎn)后的參數(shù)都是this.$route。
  3. vuex狀態(tài)管理
  地址列表的初始化，添加，刪除，更新，設(shè)為默認(rèn)地址都是通過(guò)vuex倉(cāng)庫(kù)狀態(tài)管理。
  創(chuàng)建一個(gè)store包含三部分

const store = new Vuex.Store({
  state:{
    lists: null,
  },
  mutations:{
    // 同步操作
    init(state,lists){
      state.lists = lists
    }
  },
  actions:{
    // 異步操作
    getLists(){
      axios.get(url.addressLists).then(res=>{
        // commit觸發(fā)傳入數(shù)據(jù),觸發(fā)init方法
        store.commit('init',res.data.lists)
      })
    }
}

• state
  獲取狀態(tài)對(duì)象，通過(guò)this.$store.state獲取
• mutations
  直接修改state，但是只能是同步操作，通過(guò)this.$store.commit執(zhí)行。
• actions
  通過(guò)commit mutations 間接的修改state，可以包含異步操作， 通過(guò)this.$store.dispatch調(diào)用。