大多數(shù)的商城類(lèi)小程序都有這個(gè)功能，點(diǎn)擊“全部訂單”，“待付款”，“待發(fā)貨”，“待收貨”，“已完成”，會(huì)跳轉(zhuǎn)頁(yè)面且跳至與之相對(duì)應(yīng)的選項(xiàng)卡中。所以我們?cè)陂_(kāi)發(fā)該小程序時(shí)也做了相同的功能。如下圖：

但是我們?cè)谧詈笞鼋换サ臅r(shí)候，并沒(méi)有使用該效果，下篇再說(shuō)這個(gè)！先說(shuō)說(shuō)這個(gè)效果是如何實(shí)現(xiàn)的！

選項(xiàng)卡靜態(tài)布局思路： 主要用到 scroll-view與 swiper標(biāo)簽，選項(xiàng)卡切換主要依靠 swiper 中的 current 屬性，不懂請(qǐng)自行查看小程序API。 
跳轉(zhuǎn)頁(yè)面且跳至與之相對(duì)應(yīng)的選項(xiàng)卡思路： 
首先在 app.js 中配置 globalData。 
在“個(gè)人中心” js 文件中配置點(diǎn)擊該項(xiàng)跳轉(zhuǎn)至與之對(duì)應(yīng)的 tab 的 index。 
在“個(gè)人中心”跳轉(zhuǎn)頁(yè)面時(shí)通過(guò) globalData 傳遞 index 給“全部訂單”頁(yè)面，“全部訂單”頁(yè)面通過(guò) app.globalData.currentLocation 接受數(shù)據(jù)，改變選項(xiàng)卡的切換。

app.js 代碼

1. globalData: {
2. userInfo: null
3. }

個(gè)人中心 wxml 代碼

1. <!--九宮格 -->
2. <view class="page">
3. <view class="page__bd">
4. <view class="weui-grids">
5. <view class="allrec" bindtap="allForm">
6. <text>我的訂單</text>
7. <view class="more">查看更多訂單</view>
8. <image class='moreImg' src='../../img/more.png'></image>
9. </view>
10. <!--待付款 -->
11. <view class="weui-grid" hover-class="weui-grid_active" bindtap="noPay">
12. <image class="weui-grid__icon" src="../../img/wallet.png" />
13. <view class="weui-badge" hidden="{{false}}">{{badgeNum1}}</view>
14. <view class="weui-grid__label label">待付款</view>
15. </view>
16.  
17. <!--待發(fā)貨 -->
18. <view class="weui-grid" hover-class="weui-grid_active" bindtap="noSend">
19. <image class="weui-grid__icon" src="../../img/wallet-1.png" />
20. <view class="weui-badge" hidden="{{false}}">{{badgeNum1}}</view>
21. <view class="weui-grid__label label">待發(fā)貨</view>
22. </view>
23.  
24. <!--已發(fā)貨 -->
25. <view class="weui-grid" hover-class="weui-grid_active" bindtap="sended">
26. <image class="weui-grid__icon" src="../../img/wallet-2.png" />
27. <view class="weui-badge" hidden="{{false}}">{{badgeNum1}}</view>
28. <view class="weui-grid__label label">待收貨</view>
29. </view>
30.  
31. <!--已完成 -->
32. <view class="weui-grid" hover-class="weui-grid_active" bindtap="completed">
33. <image class="weui-grid__icon" src="../../img/wallet-3.png" />
34. <view class="weui-grid__label label">已完成</view>
35. </view>
36. </view>
37. </view>
38. </view>

個(gè)人中心 js 代碼

1. var app = getApp()
2. var util = require('../../utils/util.js')
3. var formatLocation = util.formatLocation
4.  
5. Page({
6. data: {
7. },
8. // 指定 全部訂單 和 九宮格中按鈕 點(diǎn)擊跳轉(zhuǎn)至 選項(xiàng)卡中 與之對(duì)應(yīng)的tab
9. allForm:function(){
10. app.globalData.currentLocation = 0,
11. wx.navigateTo({ url: '../orderForm/orderForm' })
12. },
13. noPay:function(){
14. app.globalData.currentLocation = 1,
15. wx.navigateTo({ url: '../orderForm/orderForm' })
16. },
17. noSend