用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

微信小程序仿某宝顶部可滑动Tab效果

纸飞机 2018-3-8 09:34

作者:哲学李论,来自原文地址 具体是不是某宝的效果不管它,tab分类切换在许多业务场景中都能用到,不但可以在顶部滑动,稍修改一下,在底部滑动也可以。作者是易小程,已将其代码开源在:https://github.com/zhong ...

作者:哲学李论,来自

原文地址

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

作者是易小程,已将其代码开源在:

https://github.com/zhongjie-chen/wx-scrollable-tab-view


项目下载:

wx-scrollable-tab-view-master.zip

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

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

2,scroll-view上面是使用view自定义实现的tabbar,蓝色的下划线是css样式控制的。

3,在scroll-view绑定touch事件

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

在js中计算滑动的距离,以此控制activeTab与蓝色下划线的offset。代码不复杂,但如果亲自实现并调试通过,即使是有经验的老程序员也得花上一些时间。

作者没有使用任何第三方类库,是原生实现,便于集成与复用。

在代码中有这样的代码,值得讲一下:

  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的多返回值类似,看来语言都会相互学习成长。

鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏