开发者社区> 云栖号资讯小哥> 正文

实现手淘金刚区类目列表的scroll滑动效果

简介:
+关注继续查看

云栖号资讯:【点击查看更多行业资讯
在这里您可以找到不同行业的第一手的上云资讯,还在等什么,快来!


实现手淘金刚区类目列表的scroll滑动效果,我也不知道这种css效果的专业术语是什么,就先这么叫吧。。。

1、前言

  • 在h5开发的过程中,轮播图下面放个类目的list(产品术语叫金刚区)是电商产品中很常见的布局,以前都是一行或两行排完,但是随着类目越来越多,出现了这么几种设计:

(1). 最后一个类目为查看更多,点击跳转去一个新的页面;

(2). 用swiper包裹,将多个类目当轮播图展示;

(3). 类目scroll可滑动展示。最后一种展现设计方式出现的最晚,也是现在较为主流的展现方式,所以今天我们来实现下。

  • 实现的方式:借助better-scroll库
  • 实现的难点就是一个:对滚动条的处理
  • 先看看手淘的效果:

1

2、BetterScroll

(1)介绍

  • better-scroll库是一个很优秀的库,在作者2.0的版本中,我们实现一个基本的滚动只需引入它的核心滚动,体积也很小。更多可以去官网看看。

(2)安装

2

3、实现

(1)实现效果其实很简单,利用better-scroll暴露出的两个特性、translateX、Math对象

  • maxScrollX:最大横向滚动位置,也就是整个宽度的大小,offsetLeft的感觉。
  • scroll:监听scroll的方法,告诉你滚到哪里了。
  • translateX:定义X轴的值,这里我们用百分比。
  • Math.abs:将负数转为正数

(2)用better-scroll提供的方法计算出目前列表滚动位置占整个宽度的百分比比,然后赋予translateX,就可以实现两者实时的同步滚动了。代码:

_1

4、小结

最后看看我们的实现效果(大致框架就是如此,效果自由发挥吧):

11

  • 我们panda-mall首页中也使用了这个常见的布局方式-->首页分类icon滑动

【云栖号在线课堂】每天都有产品技术专家分享!
课程地址:https://yqh.aliyun.com/zhibo

立即加入社群,与专家面对面,及时了解课程最新动态!
【云栖号在线课堂 社群】https://c.tb.cn/F3.Z8gvnK

原文发布时间:2020-04-03
本文作者:E.wall
本文来自:“掘金”,了解相关信息可以关注“掘金

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
android galley实现画廊效果
青春流水指间、 每段路,都有即将要来的旅程 每颗心,都有值得期待的成分 Android之ImageSwitcher,Gallery用法 今天在做一个软件界面时用到了ImageSwitcher和Gallery控件,在看API时,感觉上面的例子讲的不是很具体,效率并不高。在这里我就以一个图片浏览功能来具体说明这两个控件的用法。 首先看运行效果: 在这里图片我用
1477 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
18709 0
用PS设计等高线效果的背景图片
有些简单的单网页,如果利用等高线效果的背景图片,再配合合适的背景色,能达到绚丽的效果。如下图所示:   本文就介绍该等高线效果的背景图片是如何制作的。Follow Me!!!!   1、新建文档,尺寸:1000px*1000px   2、用矩形工具创建一个矩形,尺寸:500px*...
708 0
3.CCFadeOutTRTiles,部落格效果,跳动的方块特效,3D瓷砖晃动特效,破碎的3D瓷砖特效,瓷砖洗牌特效,分多行消失特效,分多列消失特效
 1 TiledGrid3D //TiledGrid3D //CCFadeOutTRTiles * action = CCFadeOutTRTiles::create(2, CCSize(20,20)); //CCFadeOutBLTiles * action = CCFadeOutBLTiles::create(2, CCSi
1699 0
2.CCGridAction(3D效果),3D反转特效,凸透镜特效,液体特效,3D翻页特效,水波纹特效,3D晃动的特效,扭曲旋转特效,波动特效,3D波动特效
 1 类图组织 2 实例 CCSprite * spr = CCSprite::create("HelloWorld.png"); spr->setPosition(ccp(winSize.width/2,winSize.height/2)); addChild(spr);   //GridAction
1409 0
Gallery:android:galleryItemBackground 什么效果
源码下载地址:http://download.csdn.net/detail/flyingsir_zw/9658434 设置 android:galleryItemBackground 后的效果 不设置的效果如下: 设置 android:galleryItemBackground 的方法如下: 1.项目目录res/values/a
1357 0
怎么设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程
10170 0
+关注
云栖号资讯小哥
云栖号小编在此 ^o^
1403
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载