大(dà)多數的(de)商城類小程序都有這(zhè)個(gè)功能，點擊“全部訂單”，“待付款”，“待發貨”，“待收貨”，“已完成”，會跳轉頁面且跳至與之(zhī)相對應的(de)選項卡中。所以(yǐ)我們在(zài)開發該小程序時(shí)也(yě)做了(le／liǎo)相同的(de)功能。如下圖：

但是(shì)我們在(zài)最後做交互的(de)時(shí)候，并沒有使用該效果，下篇再說(shuō)這(zhè)個(gè)！先說(shuō)說(shuō)這(zhè)個(gè)效果是(shì)如何實現的(de)！

選項卡靜态布局思路： 主要(yào / yāo)用到(dào) scroll-view與 swiper标簽，選項卡切換主要(yào / yāo)依靠 swiper 中的(de) current 屬性，不(bù)懂請自行查看小程序API。 
跳轉頁面且跳至與之(zhī)相對應的(de)選項卡思路： 
首先在(zài) app.js 中配置 globalData。 
在(zài)“個(gè)人(rén)中心” js 文件中配置點擊該項跳轉至與之(zhī)對應的(de) tab 的(de) index。 
在(zài)“個(gè)人(rén)中心”跳轉頁面時(shí)通過 globalData 傳遞 index 給“全部訂單”頁面，“全部訂單”頁面通過 app.globalData.currentLocation 接受數據，改變選項卡的(de)切換。

app.js 代碼

  globalData: {
    userInfo: null
  }

個(gè)人(rén)中心 wxml 代碼

<!--九宮格  -->
<view class="page">
  <view class="page__bd">
    <view class="weui-grids">
      <view class="allrec" bindtap="allForm">
          <text>我的(de)訂單</text>
          <view class="more">查看更多訂單</view>
          <image class='moreImg' src='../../img/more.png'></image>
      </view>
      <!--待付款  -->
      <view class="weui-grid" hover-class="weui-grid_active" bindtap="noPay">
        <image class="weui-grid__icon" src="../../img/wallet.png" />
        <view class="weui-badge" hidden="{{false}}">{{badgeNum1}}</view>
        <view class="weui-grid__label label">待付款</view>
      </view>
      <!--待發貨  -->  
      <view class="weui-grid" hover-class="weui-grid_active" bindtap="noSend">
        <image class="weui-grid__icon" src="../../img/wallet-1.png" />
        <view class="weui-badge" hidden="{{false}}">{{badgeNum1}}</view>
        <view class="weui-grid__label label">待發貨</view>
      </view>
      <!--已發貨  -->
      <view class="weui-grid" hover-class="weui-grid_active" bindtap="sended">
        <image class="weui-grid__icon" src="../../img/wallet-2.png" />
        <view class="weui-badge" hidden="{{false}}">{{badgeNum1}}</view>
        <view class="weui-grid__label label">待收貨</view>
      </view>
      <!--已完成  -->
      <view class="weui-grid" hover-class="weui-grid_active" bindtap="completed">
        <image class="weui-grid__icon" src="../../img/wallet-3.png" />
        <view class="weui-grid__label label">已完成</view>
      </view>
    </view>
  </view>
</view>

個(gè)人(rén)中心 js 代碼

var app = getApp()
var util = require('../../utils/util.js')
var formatLocation = util.formatLocation
Page({
  data: {
  },
  // 指定 全部訂單 和(hé / huò) 九宮格中按鈕 點擊跳轉至 選項卡中 與之(zhī)對應的(de)tab
  allForm:function(){
    app.globalData.currentLocation = 0,
    wx.navigateTo({ url: '../orderForm/orderForm' }) 
  },
  noPay:function(){
    app.globalData.currentLocation = 1,
    wx.navigateTo({ url: '../orderForm/orderForm' })  
  },
  noSend