本篇爲(wéi / wèi)大(dà)家介紹爲(wéi / wèi)何我們在(zài)最後做交互的(de)時(shí)候，并沒有使用上(shàng)一篇講的(de)選項卡的(de)效果。

大(dà)家注意看，在(zài)我點擊跳轉後，首先能看到(dào)的(de)是(shì)切換選項卡的(de)一個(gè)運動過程，然後才給用戶展示出(chū)被跳轉的(de)頁面，開始看起來(lái)挺炫酷的(de)，但我們覺得這(zhè)不(bù)是(shì)一個(gè)好的(de)用戶體驗。因爲(wéi / wèi)随着使用次數的(de)增加，會讓用戶感覺到(dào)這(zhè)個(gè)功能不(bù)能馬上(shàng)展示出(chū)他(tā)想要(yào / yāo)的(de)頁面，還會有一種審美疲勞的(de)感覺。 
同時(shí)大(dà)家也(yě)都知道(dào)，微信小程序大(dà)小隻限定在(zài)2M以(yǐ)内，而(ér)這(zhè)種寫法會增加不(bù)少的(de)代碼量，所以(yǐ)盡量的(de)精簡代碼。 
這(zhè)大(dà)概也(yě)是(shì)大(dà)多數類似的(de)小程序沒有該功能的(de)原因吧！（純屬本人(rén)瞎猜）

既然沒有了(le／liǎo)這(zhè)個(gè)效果，那我們如何實現切換選項卡的(de)功能呢？ 
思路：在(zài)“個(gè)人(rén)中心”點擊跳轉時(shí)需要(yào / yāo)傳遞一個(gè) id （index），然後在(zài)“全部訂單”頁面接收，用該 id （index）使被選中 tab 高亮，同時(shí)把用該 id（index）交互過來(lái)的(de)數據渲染在(zài)頁面中。 
在(zài)“全部訂單”頁面點擊 tab 切換頁面時(shí)，同理使用該 tab 攜帶的(de) id （index）進行交互，把交互過來(lái)的(de)數據渲染在(zài)頁面中。

wxml代碼，是(shì)不(bù)是(shì)比上(shàng)一篇的(de)精簡很多呢？

  
 scroll-x="true" bindscroll="scroll" class="scroll-view_H list-liu">
   class="scroll-view-item_H swiper-tab-list {{currentTab==0?'on':''}}" bindtap="swichNav" hover-class="eee" id="1">全部
   class="scroll-view-item_H swiper-tab-list {{currentTab==1?'on':''}}" bindtap="swichNav" hover-class="eee" id="2">待付款
   class="scroll-view-item_H swiper-tab-list {{currentTab==2?'on':''}}" bindtap="swichNav" hover-class="eee" id="3">待發貨
   class="scroll-view-item_H swiper-tab-list {{currentTab==3?'on':''}}" bindtap="swichNav" hover-class="eee" id="4">已發貨
   class="scroll-view-item_H swiper-tab-list {{currentTab==4?'on':''}}" bindtap="swichNav" hover-class="eee" id="5">已完成
 
 scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">
   class="kong">
  
   class="list" wx:for="{{carts}}" wx:key="*this">
    
     class="pic">
       src="{{item.product_photo_path}}">
    
    
     url="../detail/detail" class="con" id="{{item.er[0].ordernoId}}" bindtap="navigatorToDetail">
    
       class="type1">{{item.product_name}}
       class="type2">{{item.product_content}}
    
    
    
     class="price">
       class="price1">￥{{item.product_price}}
       class="number">×{{item.product_count}}
       src="../../img/del.png" bindtap="deleteThis" id="{{item.er[0].ordernoId}}" >
    
  

本篇結束，感謝大(dà)家觀摩！