专栏首页OECOM微信网页开发页面上滑效果

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

我记得在之前我写过两篇关于微信网页开发上滑效果的文章,在那两篇文章中滑动是全部页面都滑动,但是会使页面的机动性变差,如果说我这个页面想滑动,但是那个页面又不想滑动又该怎么办呢,下面我来给大家介绍一种滑动方式,这种方式是通过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%,则页面显示的是向下滑动。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 404页面对SEO的影响

    当你打开某一个网站的内页页面不存在,提示页面不存在或者连接错误,该页面上可以访问到网站的其他页面,这样的页面称之为404页面。

    无邪Z
  • HTML的声明标签

    我们在书写网页的时,很少关注HTML的声明标签。同时,很多设计师和开发者都不知道什么是DOCTYPE,DOCTYPE有什么用。DOCTYPE是document ...

    无邪Z
  • js实现跳转页面

    页面跳转的方法有很多,如果你的页面是jsp页面,你可以在servlet中添加java代码来实现跳转,这里我就不多说了。我要说的是在jsp页面通过js来实现页面跳...

    无邪Z
  • SpringBoot学习五:错误处理、跨域支持

    Spring Boot默认提供一个/error映射用来以合适的方式处理所有的错误,并将它注册为servlet容器中全局的错误页面。当出现一个错误信息时,会产生一...

    关忆北.
  • CentOS7修改主机名的三种方法

    root@abc ~]# hostnamectl set-hostname 主机a

    用户3097656
  • 理一理屏幕尺寸那些事

    其中configuration.fontScale是根据系统字号改变的,默认是1,所以会遇到dp和sp混用无影响的情况。但,一旦用户改变了系统字号,有一定的缩放...

    张风捷特烈
  • 理一理屏幕尺寸那些事

    其中configuration.fontScale是根据系统字号改变的,默认是1,所以会遇到dp和sp混用无影响的情况。但,一旦用户改变了系统字号,有一定的缩放...

    张风捷特烈
  • maven私服搭建

    首先要明确仓库的概念 一、仓库:本地仓库、第三方仓库(内部中心仓库\私服)、中央仓库。{曾经刚学习的时候一度认为私服是本地仓库,要区分开,本仓库是你.m2文件...

    逐梦的青春
  • 《从案例中学习JavaScript》之酷炫音乐播放器(三)进度条音轨

    剽悍一小兔
  • sqoop关系型数据迁移原理以及map端内存为何不会爆掉窥探

      序:map客户端使用jdbc向数据库发送查询语句,将会拿到所有数据到map的客户端,安装jdbc的原理,数据全部缓存在内存中,但是内存没有出现爆掉情况,这是...

    intsmaze-刘洋

扫码关注云+社区

领取腾讯云代金券