微信小程序之scroll-view选项卡与跳转 （二）

本篇为大家介绍为何我们在最后做交互的时候，并没有使用上一篇讲的选项卡的效果。

scroll-view与跳转.gif

（如无法查看图片，还请翻看上一篇！）

大家注意看，在我点击跳转后，首先能看到的是切换选项卡的一个运动过程，然后才给用户展示出被跳转的页面，开始看起来挺炫酷的，但我们觉得这不是一个好的用户体验。因为随着使用次数的增加，会让用户感觉到这个功能不能马上展示出他想要的页面，还会有一种审美疲劳的感觉。
同时大家也都知道，微信小程序大小只限定在2M以内，而这种写法会增加不少的代码量，所以尽量的精简代码。
这大概也是大多数类似的小程序没有该功能的原因吧！（纯属本人瞎猜）

既然没有了这个效果，那我们如何实现切换选项卡的功能呢？
思路：在“个人中心”点击跳转时需要传递一个 id （index），然后在“全部订单”页面接收，用该 id （index）使被选中 tab 高亮，同时把用该 id（index）交互过来的数据渲染在页面中。
在“全部订单”页面点击 tab 切换页面时，同理使用该 tab 携带的 id （index）进行交互，把交互过来的数据渲染在页面中。

wxml代码，是不是比上一篇的精简很多呢？

<!--全部订单页  -->
  <!--选项卡标题  --><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">待发货</view>
  <view class="scroll-view-item_H swiper-tab-list {{currentTab==3?'on':''}}" bindtap="swichNav" hover-class="eee" id="4">已发货</view>
  <view class="scroll-view-item_H swiper-tab-list {{currentTab==4?'on':''}}" bindtap="swichNav" hover-class="eee" id="5">已完成</view></scroll-view>
  <!-- 选项卡内容 --><!-- 全部订单 内容 --> <scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}">
  <view class="kong"></view>
  <!--写入显示内容  -->
  <view class="list" wx:for="{{carts}}" wx:key="*this">
    <!-- 图片 -->
    <view class="pic">
      <image class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="{{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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../img/del.png" bindtap="deleteThis" id="{{item.er[0].ordernoId}}" ></image>
    </view>
  </view></scroll-view>

本篇结束，感谢大家观摩！