HTML笔记 杂谈 ·

微信网页开发页面上滑效果

我记得在之前我写过两篇关于微信网页开发上滑效果的文章,在那两篇文章中滑动是全部页面都滑动,但是会使页面的机动性变差,如果说我这个页面想滑动,但是那个页面又不想滑动又该怎么办呢,下面我来给大家介绍一种滑动方式,这种方式是通过GreenSocket来实现的,来看一下代码吧。

touch.on('#step-1', 'swipeup', function(ev) {
		TweenMax.to(“#id1”,0.4, {top: '-100%'});
                TweenMax.to(“#id2”,0.4, {top: '0%'});
	});

在上面这个例子中,#setp-1这个id为你触摸的区域id,即如果你手指滑动位置不在这个id范围内,则无法实现滑动,所以一般情况下都是让这个id的div为整个屏幕,这样就不会导致因为碰到滑动层而无法滑动的问题了。第二个参数显而易见,控制上滑。下一个参数我一个方法,里面采用的是GreenSocket的方法来实现。第一个参数为需要上滑页面的id,第二个参数为上滑的速度,第三个参数为设置页面据顶部高度。一般情况下一个页面的高度为100%,即整个页面向上滑动100%,则出了可视范围,由100%到0则为进入可视范围,如果说是从0到100%,则页面显示的是向下滑动。

参与评论