先看效果：
具体是不是某宝的效果不管它，tab分类切换在许多业务场景中都能用到，不但可以在顶部滑动，稍修改一下，在底部滑动也可以。
作者是易小程，已将其代码开源在：https://github.com/zhongjie-chen/wx-scrollable-tab-view
它是这样实现的：
1，在wxml中使用横向滑动的scroll-view
2，scroll-view上面是使用view自定义实现的tabbar，蓝色的下划线是css样式控制的。
3，在scroll-view绑定touch事件
bindtouchstart="handlerStart" catchtouchmove="handlerMove" bindtouchcancel="handlerCancel" bindtouchend="handlerEnd
在js中计算滑动的距离，以此控制activeTab与蓝色下划线的offset。代码不复杂，但如果亲自实现并调试通过，即使是有经验的老程序员也得花上一些时间。
作者没有使用任何第三方类库，是原生实现，便于集成与复用。
在代码中有这样的代码，值得讲一下：
let{clientX, clientY}= e.touches[0];
let{stv}= this.data;
let offsetX = this.startX - clientX;
this.startX = clientX;
let关键字声明的是什么鬼？为什么变量名用花括号括起来？
这是ECMAScript6（cs6）的新特性，叫做解构赋值，也可以叫做析构赋值，英文关键词destructuring assignment，是借鉴ruby和python的。
例如：
var [a,b] = [1,3]; //a=1,b=3 索引解构
var {a} = {a:{test:1}}; // a为{test:1}，属性名解构
下面这行代码，require返回一个object,使用解构赋值，可以只取出对应名字的属性
var { openDialog } = require('sdk/window/utils');
等价于：var utils = require('sdk/window/utils');var openDialog = urtils.openDialog;解构赋值的好处是可以只导出自己需要的，而且可以一次导出多个，避免了繁冗的var和赋值操作。
在es6中，左值不再只能有一个了。 与golang的多返回值类似，看来语言都会相互学习成长。
---
我在知乎开了一个live，4月22日晚（周六）8点半我在知乎与大家见面：
【0基础周末学习小程序开发】
https://www.zhihu.com/lives/832919740296101888
在【哲学李论】公众号回复"0基础周末学习小程序开发"，可以免费领券，限量500名。
在微信公众号哲学李论，回复“小程序入门集锦”可以看到这个系列的所有文章。
知乎同名专栏：https://zhuanlan.zhihu.com/zero-weapp
本文同时在多个平台、社群转发，在公众号回复“社群”可与其它艺友热情连接。
如果觉得本文还行，请转发到朋友圈让更多朋友看到。
如果您看到有料的文章，荐文热线：[email protected]。