上一篇：微信小程序之scroll-view選項(xiàng)卡與跳轉(zhuǎn) （一）
本篇為大家介紹為何我們在最后做交互的時候，并沒有使用上一篇講的選項(xiàng)卡的效果。

scroll-view與跳轉(zhuǎn).gif

（如無法查看圖片，還請翻看上一篇?。?/p>

大家注意看，在我點(diǎn)擊跳轉(zhuǎn)后，首先能看到的是切換選項(xiàng)卡的一個運(yùn)動過程，然后才給用戶展示出被跳轉(zhuǎn)的頁面，開始看起來挺炫酷的，但我們覺得這不是一個好的用戶體驗(yàn)。因?yàn)殡S著使用次數(shù)的增加，會讓用戶感覺到這個功能不能馬上展示出他想要的頁面，還會有一種審美疲勞的感覺。
同時大家也都知道，微信小程序大小只限定在2M以內(nèi)，而這種寫法會增加不少的代碼量，所以盡量的精簡代碼。
這大概也是大多數(shù)類似的小程序沒有該功能的原因吧！（純屬本人瞎猜）

既然沒有了這個效果，那我們?nèi)绾螌?shí)現(xiàn)切換選項(xiàng)卡的功能呢？
思路：在“個人中心”點(diǎn)擊跳轉(zhuǎn)時需要傳遞一個 id （index），然后在“全部訂單”頁面接收，用該 id （index）使被選中 tab 高亮，同時把用該 id（index）交互過來的數(shù)據(jù)渲染在頁面中。
在“全部訂單”頁面點(diǎn)擊 tab 切換頁面時，同理使用該 tab 攜帶的 id （index）進(jìn)行交互，把交互過來的數(shù)據(jù)渲染在頁面中。

wxml代碼，是不是比上一篇的精簡很多呢？

<!--全部訂單頁  -->
  <!--選項(xiàng)卡標(biāo)題  -->
<scroll-view scroll-x="true" bindscroll="scroll" class="scroll-view_H list-liu">
  <view class="scroll-view-item_H swiper-tab-list {{currentTab==0?'on':''}}" bindtap="swichNav" hover-class="eee" id="1">全部</view>
  <view class="scroll-view-item_H swiper-tab-list {{currentTab==1?'on':''}}" bindtap="swichNav" hover-class="eee" id="2">待付款</view>
  <view class="scroll-view-item_H swiper-tab-list {{currentTab==2?'on':''}}" bindtap="swichNav" hover-class="eee" id="3">待發(fā)貨</view>
  <view class="scroll-view-item_H swiper-tab-list {{currentTab==3?'on':''}}" bindtap="swichNav" hover-class="eee" id="4">已發(fā)貨</view>
  <view class="scroll-view-item_H swiper-tab-list {{currentTab==4?'on':''}}" bindtap="swichNav" hover-class="eee" id="5">已完成</view>
</scroll-view>
  
<!-- 選項(xiàng)卡內(nèi)容 -->
<!-- 全部訂單 內(nèi)容 --> 
<scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">
  <view class="kong"></view>
  <!--寫入顯示內(nèi)容  -->
  <view class="list" wx:for="{{carts}}" wx:key="*this">
    <!-- 圖片 -->
    <view class="pic">
      <image src="{{item.product_photo_path}}"></image>
    </view>
    <!-- 類型表述 -->
    <navigator url="../detail/detail" class="con" id="{{item.er[0].ordernoId}}" bindtap="navigatorToDetail">
    <!-- <view> -->
      <text class="type1">{{item.product_name}}</text>
      <text class="type2">{{item.product_content}}</text>
    <!-- </view> -->
    </navigator>
    <!-- 價格 -->
    <view class="price">
      <text class="price1">￥{{item.product_price}}</text>
      <text class="number">×{{item.product_count}}</text>
      <image src="../../img/del.png" bindtap="deleteThis" id="{{item.er[0].ordernoId}}" ></image>
    </view>
  </view>
</scroll-view>

本篇結(jié)束，感謝大家觀摩！