视差效果现在很多应用中都会有用到。一般在商城类应用的商品详情页会用到,比如上面是图片,下面是文字。用户向上滑动时,图片能够慢点离开用户视线,从而达到较好的体验效果。
功能分析:
视差效果就是让多层背景以不同的速度去移动。
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是单位数量的转换。