app活动页面上的痛点

时间:2021-11-11 10:32:44

app项目上需要做一个小的活动,先看下页面布局

app活动页面上的痛点

需求是这5个板块逐个展示,展示一块的时候,页面整体向上滚动一定的距离。

刚开始考虑的时候,是准备依赖css3属性的transition实现的,包括顺序延迟都没有任何问题,可是等到真正实现的时候,发现无法监听每一个模块展示之后,实现滚动条的滚动。(或者是因为我没有考虑到怎么监听吧)

然后剩下的一条路就是setInterval和setTimeout了,首先想到的是setInterval,因为有多个模块嘛,逐一展示,自然是开启间隔定时器(setInterval)了,执行中,发现两个问题,一个是无法在合适的时候,关闭定时器了;第二个问题是,直接操作滚动条滚动的话,没有缓动效果,看起来特别生硬的感觉。

第一个问题,很容易解决了,替换成延时定时器setTimeout,每一个模块延迟不一样的时间,就解决了逐一展示的问题。

操作滚动条,需要缓动效果,就比较坑了。

讨论了很久,发现,如果直接操作页面滚动条的话,是没有办法实现缓动的。不得已,转换思路:

缓动,只有运动函数和css的animation,transition才有缓动函数,那么就是定方案了。

采用运动函数的话,肯定需要定位,那么页面的自带的滚动条可能就没法使用了。

css方案的话,需要根据子元素的滚动,来实现类似于整个document.body的向上滚动,也是一大痛点。

最终决定采用css方案,配合延迟定时器,每展示一个模块,类似于document.body的盒模型,我采用了一个.main整个包裹了所有元素,所以我这里向上滑动的就是.main,

.main向上滑动的距离等于每个模块需要滑动的距离乘以当前元素的序号。

$('.main').css({
'transform': '-webkit-translateY(-'+ 80 * i+ 'px)',
'transform': 'translateY(-'+ 80 * i+ 'px)',
'transition': '-webkit-transform 800ms ease-in-out',
'transition': 'transform 800ms ease-in-out'
});

当所有模块都展示之后,这里其实采用了一个偷懒的方法,实在是没有找到怎么监听最后一个模块已经展示完全的方案。

setTimeout(function(){
$(document.body).click();
}, 5200);

  其实就是再开启一个延迟定时器,在5200ms之后,触发其他需要的事件。

由于需要一个触发点,所以在5200ms之后,用js模拟了一次页面点击事件,在这个点击事件内部实现所有需要完成的工作。

$(document.body).on('click', function(){
$('.main').css({
'transform': '-webkit-translateY(0)',
'transform': 'translateY(0)',
'transition': '-webkit-transform 0ms steps(1)',
'transition': 'transform 0ms steps(1)'
});
$('.content').scrollTop(320);
});

  为了不影响页面滚动条的滑动,必须将向上的位移重置为0, 并且偷偷的把滚动条滚动到当前的位置。

这里transition的使用有一个技巧,从当前的位移,回到0,必须一步完成,不能让用户从效果上看出来页面在来回滚动,所以用到了steps(1)的属性,而且在0ms之内。

到这里,基本完成需求了,但是当我在操作页面的时候,又发现了一点问题,就是当模块还没有完全展示的时候,用户滑动了页面,结果看起来就不那么友好了。

所以采用了模块没有展示的时候,禁用触屏滑动的事件,等到页面模拟点击事件的时候,再放开触屏滚动的事件。

$(document.body).on('touchmove.move',function(e){
e.preventDefault();
e.stopPropagation();
});

 放开触屏事件: 

$(document.body).off('touchmove.move')

  基本完成需求了。叫做打完收工。

app活动页面上的痛点的更多相关文章

  1. APP开发过程的优惠券设计及流程

    在整个APP开发产品发展的整个周期中,运营活动必不可少,而发放优惠券已成为运营活动的一种基本形式,而关于优惠券设计的整体流程尤为重要.接下来,常州开发APP公司专家分享一下自己的经验,希望对大家有帮助 ...

  2. Android(Xamarin)之旅(四)

    这么晚了,可能也因为一点事情,就说打开博客园看看,结果 http://www.cnblogs.com/mindwind/p/5125248.html 这篇文章瞬间吸引了我.暗暗的回想一下,十年之后,我 ...

  3. 京东专业“卖”队友,魅族手环将亮相1206魅蓝note新品发布会

    京东一直是国内*的数码产品自营销售渠道,但是,正因为庞大的数据体系和平台特殊性,经常会帮我们发现一些“好玩的”保密性较高的东西,譬如价格.信息.谍照等.而在最新上线的京东超级品牌日活动页面上,专业“ ...

  4. 2019阿里云开年Hi购季新用户分会场全攻略!

    2019阿里云云上Hi购季活动已经于2月25日正式开启,从已开放的活动页面来看,活动分为三个阶段: 2月25日-3月04日的活动报名阶段.3月04日-3月16日的新购满返+5折抢购阶段.3月16日-3 ...

  5. 2019阿里云开年Hi购季基础云产品分会场全攻略!

    2019阿里云云上Hi购季活动已经于2月25日正式开启,从已开放的活动页面来看,活动分为三个阶段: 2月25日-3月04日的活动报名阶段.3月04日-3月16日的新购满返+5折抢购阶段.3月16日-3 ...

  6. 2019阿里云开年Hi购季域名与商标分会场全攻略!

    2019阿里云云上Hi购季活动已经于2月25日正式开启,从已开放的活动页面来看,活动分为三个阶段: 2月25日-3月04日的活动报名阶段.3月04日-3月16日的新购满返+5折抢购阶段.3月16日-3 ...

  7. ELSE 技术周刊(2017.12.25期)

    业界动态 V8 release v6.4 V8引擎发布v6.4,在速度和内存优化上又带来了一些提升.对于instanceof操作符的优化,带来了3.6x速度提升,同时使得uglify-js提高了15- ...

  8. 为了运行十年前的代码,程序员们甚至翻出了一台 1977 年的 Apple II

    "Hello, World!" 46 年过去,这段被世人熟知的代码仍散发着历久弥新的魅力,和它一起登场的 C 语言,如今也成长为世界几大通行编程语言之一,为互联网世界乃至现实世界都 ...

  9. 从P6 EPPM 8 R3 到P6 EPPM 16 R1 有哪些改变?

    Product 特征 First Release for Feature P6 EPPM 通过编辑活动标识替换关系.当你需要修改一个关系,你不需要删除现有的关系,并作出一个新的,你可以简单地编辑活动的 ...

随机推荐

  1. HTML 特殊符号编码对照表

    HTML 特殊符号编码对照表 特殊符号 命名实体 十进制编码 特殊符号 命名实体 十进制编码 特殊符号 命名实体 十进制编码 Α Α Α Β Β Β Γ Γ Γ Δ Δ Δ Ε Ε Ε Ζ Ζ Ζ Η ...

  2. [知识点]SPFA算法

    // 此博文为迁移而来,写于2015年4月9日,不代表本人现在的观点与看法.原始地址:http://blog.sina.com.cn/s/blog_6022c4720102vx93.html 1.前言 ...

  3. saltstack之(十一)扩展组件salt-returners

    场景:每次执行salt任务后,将返回结果存入到数据库,可以做任务跟踪以及历史查看. 1.在node1上安装mysql数据库并启动设置root密码.[root@node1 ~]# yum -y inst ...

  4. POJ-2991 Crane(区间更新+向量旋转)

    题目大意:n个向量首尾相连,每次操作使某个区间中的所有向量都旋转同样的角度.每次操作后都回答最后一个向量的坐标. 题目分析:区间维护向量信息.向量旋转:x1=x0*cos(t)-y0*sin(t),y ...

  5. ORACLE 中KILL session

    我们知道,在Oracle数据库中,可以通过kill session的方式来终止一个进程,其基本语法结构为: alter system kill session 'sid,serial#' ; 被kil ...

  6. Android进阶笔记16:ListView篇之ListView刷新显示(全局 和 局部)

    一.ListView内容变化后,动态刷新的步骤(全局刷新): (1)更新适配器Adapter数据源:(不要使用匿名内部类) (2)调用适配器Adapter的刷新方法notifyDataSetChang ...

  7. 创建cocos项目

    创建cocos项目 进入终端输入命令: cocos new HelloCpp -p com.cocos.org -l cpp -d /Users/emerys/documents/cocos 参数说明 ...

  8. C# Process.Start()方法详解(转)

    C# Process.Start()方法详解 System.Diagnostics.Process.Start(); 能做什么呢?它主要有以下几个功能: 1.打开某个链接网址(弹窗). 2.定位打开某 ...

  9. 20190402-display展现、float浮动

    目录 1.display展现 dispaly:"none | block | inline | inline-block | list-item | run-in(主流浏览器不支持) | t ...

  10. 解决springboot jar包冲突

    直接导入springboot父项依赖,其它相关springboot依赖version不用写,由spring自动依赖. <parent> <groupId>org.springf ...