先看效果：

具体是不是某宝的效果不管它，tab分类切换在许多业务场景中都能用到，不但可以在顶部滑动，稍修改一下，在底部滑动也可以。

作者是易小程，已将其代码开源在：zhongjie-chen/wx-scrollable-tab-view

它是这样实现的：
1，在wxml中使用横向滑动的scroll-view

<scroll-view style=”height:100%” scroll-y>

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课程

• 04/22：零基础周末学习小程序开发
• 10/07：零基础前端自学入门：小程序UI容器组件
• 10/14：零基础入门：小程序基础内容与表单组件

免费领券方法：关注微信公号“艺述思维”，回复“礼券”二字，获取免费礼券。每人限领一张，数量有限，先到先得。