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

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


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

1、前言

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

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

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

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

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

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

2、BetterScroll

(1)介绍

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

(2)安装

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

3、实现

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

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

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

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

4、小结

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

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

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

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

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

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

上一篇:对面试题的一点总结


下一篇:C#委托总结