【互联网】为什么h5页面在APP上上下滑不流畅？_科技_易房网
为什么h5页面在APP上上下滑不流畅？
作者：admin
把h5页面嵌入到APP里，上下滑动比源生慢好多，为什么 易房网小编为您精选了网友的解决办法，供您参考 --------------------------------------------------
把h5页面嵌入到APP里，上下滑动比源生慢好多，为什么易房网小编为您精选了网友的解决办法，供您参考-----------------------------------------------------网友回答：
1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将
追究责任；3.作者投稿可能会经我们编辑修改或补充。
德型男飞行员肌肉健硕 每周5天在健身房锻炼
金正男遇刺后照片曝光 双眼紧闭肚子袒露半躺沙发
“炮轰记者是苍蝇”云南官员致歉：不是针对记者
男子在ATM机上查余额 隔壁机器突然“吐”出9000元
搞事情!湖南一对夫妻起争执 丈夫点燃液化气罐炸毁
我国首个“空天地海”无人系统特色小镇在沣西新城
16岁女孩生下婴儿 产后第一件事竟是连热点上网让
阿根廷西北部发生6.3级地震
友情链接、商务合作QQ:主题 : 同一个 H5 页面,为什么在 微信上面 滑动流畅, 而在自己的 app 里面就不流畅
级别: 新手上路
UID: 347545
可可豆: 97 CB
威望: 53 点
在线时间: 37(时)
发自: Web Page
来源于&&分类
同一个 H5 页面,为什么在 微信上面 滑动流畅, 而在自己的 app 里面就不流畅&&&
之前有去尝试做 scrollview的 delegate ,但是会崩掉, 谁做过类似的优化, 帮忙分析下微信实现的原理
级别: 新手上路
UID: 347545
可可豆: 97 CB
威望: 53 点
在线时间: 37(时)
发自: Web Page
回 楼主() 的帖子
微信里面滑动幅度大,可以直接滑到底部,而自己的 app 不会滑动到底部
级别: 新手上路
UID: 347545
可可豆: 97 CB
威望: 53 点
在线时间: 37(时)
发自: Web Page
有人吗有人吗有人吗有人吗有人吗
级别: 新手上路
UID: 347545
可可豆: 97 CB
威望: 53 点
在线时间: 37(时)
发自: Web Page
&&&&&&&&&&
级别: 新手上路
UID: 347545
可可豆: 97 CB
威望: 53 点
在线时间: 37(时)
发自: Web Page
现在解决,监听 Scrollview 蹦的问题了
级别: 侠客
可可豆: 234 CB
威望: 224 点
在线时间: 580(时)
发自: Web Page
级别: 新手上路
UID: 347545
可可豆: 97 CB
威望: 53 点
在线时间: 37(时)
发自: Web Page
额,解决了解决代码:self.WebView.scrollView.decelerationRate = UIScrollViewDecelerationRateN资料:UIScrollView 有个属性 decelerationRateA floating-point value that determines the rate of deceleration after the user lifts their finger.当用户停止拖动 scrollview 后,决定 Scrollview 滚动的减速速度的浮点值属性.可以用 UIScrollViewDecelerationRateNormal 和 UIScrollViewDecelerationRateFast 两个常量设置 decelerationRate的值.UIScrollViewDecelerationRateNormal 会使 Scrollview 减速速度慢慢降下来(会有一个滑动效果,类似于惯性)UIScrollViewDecelerationRateFast&&会使 Scrollview 减速速度快速降为0(用户松开手指,滑动的距离很短)
关注本帖(如果有新回复会站内信通知您)
苹果公司现任CEO是谁？2字 正确答案:库克
发帖、回帖都会得到可观的积分奖励。
按"Ctrl+Enter"直接提交
关注CocoaChina
关注微信 每日推荐
扫一扫 浏览移动版我们开门见山，一起来学习如何进行H5 滑动页面的开发。
一、容器整体滑动（DEMO只演示A-B-C-B，下同）
模拟动画效果见下图(上)，滑动分解见下图(下)：
DEMO地址：
具体实现重点代码解析：
布局方式：父容器相对定位并撑满整个device的viewport，子页面绝对定位并依次并排排列在viewport中（从左到右）
.view-container { // 父容器布局方式
width: 100%;
height: 100%;
padding-top: 44
box-sizing: border-
-webkit-transform: translate3d(0,0,0); //激活GPU 3D加速
-webkit-backface-visibility:
.page-container { // 子页面布局方式
z-index: 1;
left: 0; // 初始化为0，动态计算第N个page，并赋值(N-1)*100%
width: 100%;
height: 100%;
background-color: #F8F8F8;
滑动方式：父容器利用CSS3的动画transform3D进行X轴的滑动(JS控制直接喷到DOM节点中)
-webkit-transform: translate3d(-100%, 0px, 0px); -webkit-transition: 300 transition: 300
二、单个页面滑动
模拟动画效果，见下图：
DEMO地址：
具体实现重点代码解析：
布局方式：父容器高度100%，子容器正常文档流布局（X轴隐藏，Y轴默认原生滚动）
.view-container {
height: 100%;
.page-container {
width: 100%;
min-height: 100%;
overflow-x:
background-color: #F8F8F8;
滑动方式：利用class添加动画样式（keyframes animation），左右进出各一种
@-webkit-keyframes sliderightout{from{-webkit-transform:translateX(0px);opacity:1}to{-webkit-transform:translateX(50%);opacity:0}}
@-webkit-keyframes slideleftin{from{-webkit-transform:translateX(-50%);opacity:0}to{-webkit-transform:translateX(0px);opacity:1}}
@-webkit-keyframes slideleftout{from{-webkit-transform:translateX(0px);opacity:1}to{-webkit-transform:translateX(-50%);opacity:0}}
@-webkit-keyframes sliderightin{from{-webkit-transform:translateX(50%);opacity:0}to{-webkit-transform:translateX(0px);opacity:1}}
.slideleftout{-webkit-animation:slideleftout 350ms ease-in-}
.slideleftin{-webkit-animation:slideleftin 350ms ease-in-}
.sliderightout{-webkit-animation:sliderightout 350ms ease-in-}
.sliderightin{-webkit-animation:sliderightin 350ms ease-in-}
.animatestart{position:top:0;left:0;z-index:3;width:100%;height:100%;overflow-x:hidden}
.animatestart.page-container{overflow-x:-webkit-transform:translate3d(0,0,0);-webkit-backface-visibility:background-color:#f5f5f5}
三、双页联动滑动
模拟动画效果，见下图：
DEMO地址：
具体实现重点代码解析：
布局方式：类似于第一种，父容器和子容器都绝对定位于viewport中，不同点是父类的上级布局更加细分，且大胆使用了webkit-box弹性盒子；子容器没有并排显示，而是重叠隐藏
.view-container {
width: 100%;
height: 100%;
.page-container {
z-index: 1;
bottom: 0;
width: 100%;
height: 100%;
background-color: #F8F8F8;
-webkit-transform:translate3d(0,0,0);
-webkit-backface-visibility:
滑动方式：滑动开始时先将隐藏的下一个子页面拉到viewport右侧与当前子页面平行，然后紧接着两个子页面同步滑动，最后回归样式，中间的时间差事件均有JS控制（详见demo逻辑）
四、三舞台双页视差滑动
模拟动画效果见下图（上），分解逻辑图见下图（下）：
DEMO地址：
布局方式：这里我设定了三舞台(stage)的概念，其实就是当前viewport的左右侧各虚拟一个同样大小的viewport，当然，正常情况下我们只能看到当前舞台的子页面，leftstage是-100%的位置，rightstage是100%的位置，我们分别用三个class来定义：pageOld、pageInit、pageNew来代替
.pageInt {
-webkit-transform: translateX(0);
transform: translateX(0);
.pageOld {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
.pageNew {
-webkit-transform: translateX(100%);
transform: translateX(100%);
滑动方式：
1，定义正向（向左滑）和反向（向右滑）两个概念,；
2，定义快速和慢速两个概念；
则就是四种动态两种组合：正向快速+正向慢速、反向快速+反向慢速；
.slideSlow {
-webkit-transition: -webkit-transform 400ms cubic-bezier(0.42, 0, 0.58, 1.0) 0.1s;
-ms-transition: transform 400ms cubic-bezier(0.42, 0, 0.58, 1.0) 0.1s;
.slideFast {
-webkit-transition: -webkit-transform 300ms cubic-bezier(0.42, 0, 0.58, 1.0);
-ms-transition: transform 300ms cubic-bezier(0.42, 0, 0.58, 1.0);
.slideSlowBack {
-webkit-transition: -webkit-transform 400ms cubic-bezier(0.42, 0, 0.58, 1.0);
-ms-transition: transform 400ms cubic-bezier(0.42, 0, 0.58, 1.0);
.slideFastBack {
-webkit-transition: -webkit-transform 300ms cubic-bezier(0.42, 0, 0.58, 1.0) 0.1s;
-ms-transition: transform 300ms cubic-bezier(0.42, 0, 0.58, 1.0) 0.1s;
其中在三舞台视差滑动中的滑动曲线是经过数次的真机实验后找到的参数（cubic-bezier(0.42, 0, 0.58, 1.0)），这条曲线的滑动形态最接近IOS APP页面的滑动，希望对大家有用。
原文来源于携程UED部门的飞柳
原文地址：/blog/?p=3697
本文标题：
本文地址：/html5css3/8919.html
除非注明，本站文章均为原创或编译，转载请注明出处和原文链接，转载同时请务必保留原网站网址。
移动APP设计入门课程
为你推荐的相关文章
Copyright@
All Rights Reserved ICP备案号：桂ICP备号-2本站声明所有资源均是网上搜集或网友上传提供，如有侵犯您的版权，请及时联系我们（），我们将尽快处理。