今日頭條App的Topbar是一個典型的頻道管理和切換組件，自己前段時間研究了一番，在微信小程序上也實現了類似的效果。

我們先看具體效果好了 ↓↓↓

接下來，簡要說一下實現思路。

先看視圖層，Topbar橫向滾動對應的WXML代碼如下：
 

1. <scroll-view class="navbar" scroll-x="true" scroll-left="{{scrollNavbarLeft}}"> 
2.  
3.     <view class="navbar-item {{ navbarArray[item].type }}" id="{{ item }}" wx:for="{{ navbarShowIndexArray }}" catchtap="onTapNavbar"> 
4.  
5.         <view class="navbar-item-wrap">{{ navbarArray[item].text }}</view> 
6.  
7.     </view> 
8.  
9.     <view class="navbar-item visibility-hidden"> 
10.  
11.         <view class="navbar-item-wrap">空白</view> 
12.  
13.     </view> 
14.  
15. </scroll-view> 
16.  
17. <view class="navbar-arrow-down" catchtap="showChannelSettingModal"> 
18.  
19.     <view class="navbar-arrow-down-wrap"> 
20.  
21.         <image class="navbar-arrow-icon" src="/images/index/icon_arrow_down.png"></image> 
22.  
23.     </view> 
24.  
25. </view> 

scroll-view負責Topbar中各個頻道的呈現，所有頻道的相關數據都存儲在navbarArray這個對象數組里，而數組navbarShowIndexArray里存儲了要顯示頻道在數組navbarArray中的索引。

不難猜測，頻道是否選中高亮，與數組navbarArray有關；頻道是否顯示，與數組navbarShowIndexArray有關。

點擊某個頻道名稱，就會觸發對應頻道的切換操作。

view.navbar-arrow-down對應的是右上角的向下箭頭，可采用fixed定位類型，點擊后彈出管理頻道的Modal.

 

1. <view class="channel-setting-modal {{ channelSettingModalShow }}" hidden="{{ channelSettingModalHide }}"> 
2.  
3.     <view class="channel-show-text"> 
4.  
5.         <view class="channel-show-text-wrap">顯示頻道</view> 
6.  
7.     </view> 
8.  
9.     <view class="channel-item" wx:for="{{ navbarShowIndexArray }}"> 
10.  
11.         <view class="channel-item-wrap"> 
12.  
13.             <view class="channel-item-left"> 
14.  
15.                 <image class="channel-item-icon-minus {{ !index || navbarShowIndexArray.length < 4 ? 'visibility-hidden' : '' }}" id="{{ item }}.0" src="/images/index/icon_minus.png" catchtap="hideChannel"></image> 
16.  
17.                 <view class="channel-item-text">{{ navbarArray[item].text }}</view> 
18.  
19.             </view> 
20.  
21.             <view class="channel-item-up {{ index < 2 ? 'visibility-hidden' : '' }}" id="{{ item }}.00" catchtap="upChannel">上移</view> 
22.  
23.         </view> 
24.  
25.     </view> 
26.  
27.     <view class="channel-hide-text"> 
28.  
29.         <view class="channel-hide-text-wrap">隱藏頻道</view> 
30.  
31.     </view> 
32.  
33.     <view class="channel-item" wx:for="{{ navbarHideIndexArray }}"> 
34.  
35.         <view class="channel-item-wrap"> 
36.  
37.             <view class="channel-item-left"> 
38.  
39.                 <image class="channel-item-icon-plus" id="{{ item }}.0" src="/images/index/icon_plus.png" catchtap="showChannel"></image> 
40.  
41.                 <view class="channel-item-text">{{ navbarArray[item].text }}</view> 
42.  
43.             </view> 
44.  
45.             <view class="channel-item-up visibility-hidden">上移</view> 
46.  
47.         </view> 
48.  
49.     </view> 
50.  
51. </view> 

在這個管理頻道的Modal里，通過改變數組navbarShowIndexArray來控制頻道是否顯示和顯示順序，同時，需要另外一個數組navbarHideIndexArray來存儲隱藏的頻道。

Modal顯示的時候，Topbar需要被另一個寫有“頻道設置”字樣的Bar覆蓋。
 

1. <view class="channel-setting {{ channelSettingShow }}"> 
2.  
3.     <view class="channel-setting-text">頻道設置</view> 
4.  
5.     <view class="navbar-arrow-up" catchtap="hideChannelSettingModal"> 
6.  
7.         <image class="navbar-arrow-icon navbar-arrow-icon-up" src="/images/index/icon_arrow_up.png"></image> 
8.  
9.     </view> 
10.  
11. </view> 

然后，我們來看邏輯層的實現。初始化的部分data如下：
 

1. data: { 
2.  
3.     navbarArray: [{ 
4.  
5.         text: '推薦', 
6.  
7.         type: 'navbar-item-active' 
8.  
9.     }, { 
10.  
11.         text: '熱點', 
12.  
13.         type: '' 
14.  
15.     }, { 
16.  
17.         text: '視頻', 
18.  
19.         type: '' 
20.  
21.     }, { 
22.  
23.         text: '圖片', 
24.  
25.         type: '' 
26.  
27.     }, { 
28.  
29.         text: '段子', 
30.  
31.         type: '' 
32.  
33.     }, { 
34.  
35.         text: '社會', 
36.  
37.         type: '' 
38.  
39.     }, { 
40.  
41.         text: '娛樂', 
42.  
43.         type: '' 
44.  
45.     }, { 
46.  
47.         text: '科技', 
48.  
49.         type: '' 
50.  
51.     }, { 
52.  
53.         text: '體育', 
54.  
55.         type: '' 
56.  
57.     }, { 
58.  
59.         text: '汽車', 
60.  
61.         type: '' 
62.  
63.     }, { 
64.  
65.         text: '財經', 
66.  
67.         type: '' 
68.  
69.     }, { 
70.  
71.         text: '搞笑', 
72.  
73.         type: '' 
74.  
75.     }], 
76.  
77.     navbarShowIndexArray: Array.from(Array(12).keys()), 
78.  
79.     navbarHideIndexArray: [], 
80.  
81.     channelSettingShow: '', 
82.  
83.     channelSettingModalShow: '', 
84.  
85.     channelSettingModalHide: true 
86.  
87. } 

11的數組，剛好是數組navbarArray的所有元素的索引。顯然，初始化的結果是所有頻道都將顯示。

為了實現頻道個性化配置的保存，navbarShowIndexArray還需要通過小程序的數據緩存API儲存起來。

storeNavbarShowIndexArray: function() {

    const that = this;

    wx.setStorage({

        key: 'navbarShowIndexArray',

        data: that.data.navbarShowIndexArray

    });

}

切換頻道的函數如下：
 

1. switchChannel: function(targetChannelIndex) { 
2.  
3.     this.getArticles(targetChannelIndex); 
4.  
5.     let navbarArray = this.data.navbarArray; 
6.  
7.     navbarArray.forEach((item, index, array) => { 
8.  
9.         item.type = ''; 
10.  
11.         if (index === targetChannelIndex) { 
12.  
13.             item.type = 'navbar-item-active'; 
14.  
15.         } 
16.  
17.     }); 
18.  
19.     this.setData({ 
20.  
21.         navbarArray: navbarArray, 
22.  
23.         currentChannelIndex: targetChannelIndex 
24.  
25.     }); 
26.  
27. } 

這樣，頻道的管理和簡單切換我們就實現了。

但是，到此為止，頻道的切換只能通過點擊對應Topbar中頻道那一小塊區域來實現，要是在正文區域左滑和右滑也能切換頻道就好了。

一個容易想到的思路是，在正文區域綁定touch事件，通過坐標判斷滑動方向，然后使Topbar中當前頻道的上一個或下一個頻道高亮，同時，控制Topbar橫向滾動合適的偏移長度，以確保切換后的頻道能出現在視圖區域。
 

1. onTouchstartArticles: function(e) { 
2.  
3.     this.setData({ 
4.  
5.         'startTouchs.x': e.changedTouches[0].clientX, 
6.  
7.         'startTouchs.y': e.changedTouches[0].clientY 
8.  
9.     }); 
10.  
11. }, 
12.  
13. onTouchendArticles: function(e) { 
14.  
15.     let deltaX = e.changedTouches[0].clientX - this.data.startTouchs.x; 
16.  
17.     let deltaY = e.changedTouches[0].clientY - this.data.startTouchs.y; 
18.  
19.     if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 10) { 
20.  
21.         let deltaNavbarIndex = deltaX > 0 ? -1 : 1; 
22.  
23.         let currentChannelIndex = this.data.currentChannelIndex; 
24.  
25.         let navbarShowIndexArray = this.data.navbarShowIndexArray; 
26.  
27.         let targetChannelIndexOfNavbarShowIndexArray = navbarShowIndexArray.indexOf(currentChannelIndex) + deltaNavbarIndex; 
28.  
29.         let navbarShowIndexArrayLength = navbarShowIndexArray.length; 
30.  
31.         if (targetChannelIndexOfNavbarShowIndexArray >= 0 && targetChannelIndexOfNavbarShowIndexArray <= navbarShowIndexArrayLength - 1) { 
32.  
33.             let targetChannelIndex = navbarShowIndexArray[targetChannelIndexOfNavbarShowIndexArray]; 
34.  
35.             if (navbarShowIndexArrayLength > 6) { 
36.  
37.                 let scrollNavbarLeft; 
38.  
39.                 if (targetChannelIndexOfNavbarShowIndexArray < 5) { 
40.  
41.                     scrollNavbarLeft = 0; 
42.  
43.                 } else if (targetChannelIndexOfNavbarShowIndexArray === navbarShowIndexArrayLength - 1) { 
44.  
45.                     scrollNavbarLeft = this.rpx2px(110 * (navbarShowIndexArrayLength - 6)); 
46.  
47.                 } else { 
48.  
49.                     scrollNavbarLeft = this.rpx2px(110 * (targetChannelIndexOfNavbarShowIndexArray - 4)); 
50.  
51.                 } 
52.  
53.                 this.setData({ 
54.  
55.                     scrollNavbarLeft: scrollNavbarLeft 
56.  
57.                 }); 
58.  
59.             } 
60.  
61.             this.switchChannel(targetChannelIndex); 
62.  
63.         } 
64.  
65.     } 
66.  
67. }