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

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

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

滚动前，两者的状态

滚动一段距离，两者的状态

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

一、视察滚动的实现原理

       视察滚动：让多层背景以不同的速度去进行移动
       1、至少需要拥有两层背景（缓慢移动区、正常移动区）
       2、将背景设置为相对布局（为缓慢移动设置 top来缓冲掉 scroll滚动）
       3、监听 Parallax组件的滑动，根据滑动来计算缓慢移动区top的值。
       说白了，就是对缓慢移动区通过使用相对布局relative&top来弥补正常滚动产生的距离。话不多说，咱们码上见真情。

二、实现“视差滚动”组件

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

1、创建模版

<template>
    <div class="parallax" @scroll="onScrollChange">
        <!--缓慢移动区-->
        <div class="parallax-slow" :style="{top: slowTop}">
            <slot name="parallax-slow"></slot>
        </div>
        <!--正常移动区-->
        <div class="parallax-content z-index-2">
          <slot></slot>
        </div>
    </div>
</template>

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

2、为模版添加样式

<style lang="scss">
  .parallax{
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;

    &-slow{
      width:100%;
      position: relative;
    }

    &-content{
      width:100%;
      position: relative;
    }
    .z-index-2{
        z-index: 2;
    }
  }
</style>

这里一定要注意.parallax一定要添加position: absolute;或者position: fixed;,否则，它的scroll事件不生效。具体的原因，你可以查看一写css相关的内容，此处不在多叙。
另外就是缓慢移动区和正常移动区要设置position:relative,这个很重要。

3、为Parallax组件添加行为

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

当前页面滑动的距离 / 速度差 = 缓慢移动区应该移动的距离

data(){
      return {
        // 速度差(正常移动端移动100px，缓冲移动区移动 100/2 = 50px)
        SPEED_DIFF: 2,
        // 页面滚动值
        parallaxScroll: 0,
      }
}

methods:{
      /*
      * 监听组件滑动
      */
     onScrollChange($event){
        this.parallaxScroll = $event.target.scrollTop
     }
}

computed:{
      /*
      * 返回 slow 距离顶部的距离
      */
     slowTop: function(){
       // 当前页面滑动的距离 / 速度差 = 缓慢移动区应该移动的距离
       return (this.parallaxScroll - (this.parallaxScroll / this.SPEED_DIFF)) + 'px'
     }
    }

三、使用“视差滚动”组件

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

<template>
  <div>
    <Parallax>
      <div slot="parallax-slow">
        <img src="http://t8.baidu.com/it/u=1484500186,1503043093&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1592793437&t=5b02a2de7f5d153bf31d6b799b6b2f92" alt="">
      </div>

      <img src="http://t8.baidu.com/it/u=2247852322,986532796&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1592793437&t=3da58a8314290bf37b99253c355490fd" alt="">
      <img src="http://t8.baidu.com/it/u=2247852322,986532796&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1592793437&t=3da58a8314290bf37b99253c355490fd" alt="">
      <img src="http://t8.baidu.com/it/u=2247852322,986532796&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1592793437&t=3da58a8314290bf37b99253c355490fd" alt="">
      <img src="http://t8.baidu.com/it/u=2247852322,986532796&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1592793437&t=3da58a8314290bf37b99253c355490fd" alt="">
      <img src="http://t8.baidu.com/it/u=2247852322,986532796&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1592793437&t=3da58a8314290bf37b99253c355490fd" alt="">
      <img src="http://t8.baidu.com/it/u=2247852322,986532796&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1592793437&t=3da58a8314290bf37b99253c355490fd" alt="">
    </Parallax>
  </div>
</template>

<script>
  import Parallax from '@c/Parallax'
  export default {
     name: 'Home',
     components: {
       Parallax
     }
  };
</script>

<style lang="scss">
  img{
    width:100%;
  }
</style>

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

<template>
    <div class="parallax" @scroll="onScrollChange">
        <!--缓慢移动区-->
        <div class="parallax-slow" :style="{top: slowTop}">
            <slot name="parallax-slow"></slot>
        </div>
        <!--正常移动区-->
        <div class="parallax-content z-index-2">
          <slot></slot>
        </div>
    </div>
</template>
<script>
export default {
    name: 'Parallax',
    data(){
      return {
        // 速度差(正常移动端移动100px，缓冲移动区移动 100/2 = 50px)
        SPEED_DIFF: 2,
        // 页面滚动值
        parallaxScroll: 0,
      }
    },
    methods:{
      /*
      * 监听组件滑动
      */
     onScrollChange($event){
        this.parallaxScroll = $event.target.scrollTop
     }
    },
    computed:{
      /*
      * 返回 slow 距离顶部的距离
      */
     slowTop: function(){
       // 当前页面滑动的距离 / 速度差 = 缓慢移动区应该移动的距离
       // 当前页面的滑动距离 - 缓慢移动区应该懂的距离 = 缓慢移动区用来缓冲掉 scroll 的值
       return (this.parallaxScroll - (this.parallaxScroll / this.SPEED_DIFF)) + 'px'
     }
    }
}
</script>
<style lang="scss">
  // @import '@css/style.scss'
  .parallax{
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;

    &-slow{
      width:100%;
      position: relative;
    }

    &-content{
      width:100%;
      position: relative;
    }
    .z-index-2{
        z-index: 2;
    }
  }
</style>

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