轻松实现视差功能，以小程序为例

视差效果现在很多应用中都会有用到。一般在商城类应用的商品详情页会用到，比如上面是图片，下面是文字。用户向上滑动时，图片能够慢点离开用户视线，从而达到较好的体验效果。

功能分析：
视差效果就是让多层背景以不同的速度去移动。
1. 至少需要两层背景。一个是缓慢移动区，另一个是正常移动区。
2. 将背景设置为相对布局。通过给缓慢区设置top值来缓冲scroll滚动。
3. 根据滑动事件监听，获取滚动距离值。
4. 通过计算，得到需要缓冲的top值。
5. 视觉差的形成条件，正常移动区域超过缓慢移动区域的时候要进行覆盖，所以需要给正常移动区设置z-index属性，大于缓慢移动区。

计算公式：所需缓冲top值 = 当前页面滑动距离 - （当前页面滑动距离 / 滚动差）
所谓滚动差，就是缓慢移动区和正常移动区移动 速度倍速差。

分析完就上代码：
wxml:

<view class="top" style="top:{
    
    {
    
    top}}rpx">
    <image src="/images/one.jpg" mode="widthFix"></image>
</view>
<view class="bottom"></view>

wxss:

.top{
    
    
    height: 300rpx;
    width: 750rpx;
    position: relative;
}
.top image{
    
    
    width: 100%;
}
.bottom{
    
    
    height: 3000rpx;
    width: 750rpx;
    z-index: 1;
    position: relative;
}

js:

 data: {
    
    
        top:0,
        diff:2                   //滚动差
    },
    onReady(){
    
    
        
    },
    onPageScroll(res){
    
    
        var s = res.scrollTop/this.data.diff   // 得到的s值为缓慢移动区应该滑动的距离。
        var speed = res.scrollTop - s   //speed为缓慢取用来缓冲掉的scroll值。
        this.setData({
    
    top:speed*2})    
    }

上面js中，speed之所以要乘以2，原因是上面两行代码得到的结果单位为px，在wxml中我写的单位为rpx 。1px = 2rpx,所以乘以2是单位数量的转换。