它是這樣實現(xiàn)的： 
1，在wxml中使用橫向滑動的scroll-view

1. <scroll-view style="height:100%" scroll-y>

2，scroll-view上面是使用view自定義實現(xiàn)的tabbar，藍色的下劃線是css樣式控制的。

3，在scroll-view綁定touch事件

1. bindtouchstart="handlerStart" catchtouchmove="handlerMove" bindtouchcancel="handlerCancel" bindtouchend="handlerEnd

在js中計算滑動的距離，以此控制activeTab與藍色下劃線的offset。代碼不復雜，但如果親自實現(xiàn)并調試通過，即使是有經驗的老程序員也得花上一些時間。

作者沒有使用任何第三方類庫，是原生實現(xiàn)，便于集成與復用。

在代碼中有這樣的代碼，值得講一下：

1. let {clientX, clientY} = e.touches[0];
2. let {stv} = this.data;
3. let offsetX = this.startX - clientX;
4. this.startX = clientX;

let關鍵字聲明的是什么鬼？為什么變量名用花括號括起來？

這是 ECMAScript6（es6）的新特性，叫做解構賦值，也可以叫做析構賦值，英文關鍵詞 destructuring assignment，是借鑒ruby和python的。

例如：

1. var [a,b] = [1,3]; //a=1,b=3 索引解構
2. var {a} = {a:{test:1}}; // a為{test:1}，屬性名解構

下面這行代碼，require返回一個object,使用解構賦值，可以只取出對應名字的屬性

1. var { openDialog } = require('sdk/window/utils');

等價于：

1. var utils = require('sdk/window/utils');
2. var openDialog = urtils.openDialog;

解構賦值的好處是可以只導出自己需要的，而且可以一次導出多個，避免了繁冗的var和賦值操作。

在es6中，左值不再只能有一個了。 與golang的多返回值類似，看來語言都會相互學習成長。