基于Vue实现商城详情页“视差滚动”效果

       首先，我们来看一下什么叫 视差滚动 。视差滚动就是 让多层背景以不同的速度进行移动而形成的效果 。可能这句话不是很好理解，我们可以查看 这点网址 来直观的感受一下。

       当我们慢慢滚动页面的时候，会发现 产品主图 和 产品详情 滚动的速度不一致， 产品详情 以正常的速度进行滚动，但是 产品主图 要比 产品详情 滚动慢一倍，所以形成了 视差效果 。你也可以参照下面我给你贴出来的图：

可能从图上，不能直观的感受出来，建议您还是点看上面的网址，直观的感受一下。

        视察滚动：让多层背景以不同的速度去进行移动

       1、至少需要拥有两层背景（缓慢移动区、正常移动区）

       2、将背景设置为相对布局（为缓慢移动设置 top 来缓冲掉 scroll 滚动）

       3、监听 Parallax 组件的滑动，根据滑动来计算 缓慢移动区 top 的值。

       说白了，就是对 缓慢移动区 通过使用相对布局 relative &top 来弥补正常滚动产生的距离。话不多说，咱们码上见真情。

       考虑到可能要有多处使用到这个效果，所以，我们将其封装成组件，通过vue插槽的方式，来实现组件的复用。当然，这里我们默认，您对vue有比较好的掌握。

       模版中，我们使用了两个 slot ,分别接受 缓慢移动区 和 正常移动区 的内容，同时监听了 .parallax 的 scroll 事件，用于判定 缓慢移动区 距离顶部的距离。接着为 .parallax-slow 绑定了属性 :style="{top: slowTop}" , 确定滚动发生后，其距离顶部的距离。

       这里一定要注意 .parallax 一定要添加 position: absolute或者 position: fixed,否则，它的 scroll 事件不生效。具体的原因，你可以查看一写css相关的内容，此处不在多叙。

       另外就是 缓慢移动区 和 正常移动区 要设置 position:relative ,这个很重要。

       这个组件的行为主要是就是要计算 缓慢移动区 距离顶部的距离 top ,所有的工作都是围绕着这个逻辑进行实现的。

       我们在视图组件（Home）中使用 视差组件 。

        到此，我们的效果就可以实现了，那么为什么要使用这中效果呢？我个人觉效果是一方面，另一方面还是为了突出页面中的 重点元素 ，比如商品详情页面中， 产品主图 肯定是我们的重点元素，所以让他滑动的慢一些可以增强用户体验。为了照顾有些不喜欢阅读文章的同学，我将 Parallax 组件的内容贴出来。

        最后，感谢您的阅读，祝您学习进步。

淘宝手机端店铺详情页添加gif动图流程如下：

1、首先登录到卖家中心，点击手机淘宝店铺；

2、点击立即装修，进入到手机端店铺装修页面；

3、点击详情装修，进入手机端详情装修页面；

4、然后到淘无忧平台使用选择淘宝神笔的装修模板；

5、编辑自定义模板，上传符合规范的gif图片即可。

这是领苗确认记录详情页需要展示给用户的内容，大家可以看到这个页面要承载很多的信息，要向下滚动一段很长的距离才能展示完，想要实现的效果是在页面的顶部有一个TabBar，用户可以通过点击TabBar进行锚点(jumpTo到指定位置)，AppBar下的整个页面是可以自由滚动的，在滚动过程中AppBar始终固定在顶部，TabBar在第一次进入详情页的时候不显示，只有在向下滑动的时候会由透明渐变为不透明并固定在顶部，同时当页面滑动到TabBar锚点位置的时候TabBar会切换到对应的下标，也就是要实现TabBar和ScrollView联动的双向控制，Tabbar的切换可以控制页面的跳转，页面的滑动又可以反过来控制TabBar的切换，类似与京东、淘宝的商品详情页效果。

SliverAppBar基本已经达到了我们想要的效果，但在界面顶部会有块空白区域试了很多方法怎么都去不掉，最后看了SliverAppBar这个控件的源码发现是它自带的初始高度。

这个没法设置或消除，不可能直接去改源码，所以后来换了一种实现思路，舍弃了SliverAppBar这个控件，以Stack的形式将TabBar置于ScrollView之上也能达到我们想要的效果，那么问题来了，如何实现TabBar的滚动渐变？很容易想到Opacity透明度控件，通过滚动监听来控制TabBar透明度的改变，借助Notificaion可以完美实现我们的需求。

Notification是Flutter中一个重要的机制，在Widget树中，每一个节点都可以分发通知（Notification）与父(包括祖先)Widget通信，通知会沿着当前节点（context）向上传递，所有父节点都可以通过NotificationListener来监听自己关注的通知，Flutter中称这种通知由子向父的传递为“通知冒泡”（Notification Bubbling）。

　 Flutter中很多地方使用了通知，如可滚动(Scrollable) Widget中滑动时就会分发ScrollNotification，而Scrollbar正是通过监听ScrollNotification来确定滚动条位置的。除了ScrollNotification，Flutter中还有SizeChangedLayoutNotification、KeepAliveNotification 、LayoutChangedNotification等。

通过NotificationListener监听滚动事件和通过ScrollController有两个主要的不同：

通过改造后，目前这个组件的原型已经实现并且可以满足我们的需求，最后就是对该demo进行完善使其能够完美接入我们的业务，做到技术赋能业务。

在一个页面滚动区域不是很长的情况下不建议使用，只有当页面足够长的情况下使用这个组件效果会比较好，因为如果一个页面过短，点击TabBar最后一栏进行锚点时，页面最后一个子模块内容无法置顶，只会将页面最后的内容推到屏幕范围内，并且由于TabBar监听到的是滚动的位置，会导致TabBar无法切换到对应的下标，看上去会像个bug，其实是因为底部已经没有内容了。

这个组件本身并没有太大的技术难度，但是有一些比较细节的小逻辑得处理好，并且从中衍生出来的很多琐碎的小的知识点都可以进行拓展。 在组件开发的过程中遇到问题时不局限于控件本身的设计模式，转变开发思维去找寻一些比较新颖的解决方案可能会有意外的收获。同时技术不能脱离于业务，技术赋能业务才能创造价值。

---