h5全屏切换滚动页面html,H5全屏切换

之前有做过一个微信中的H5小项目,其中有一个交互就是点击完按钮,页面由下往上滑动切换至下一页。做完后发现在Android(华为荣耀5a、华为荣耀3c和OPPO A37m)下效果都还好,但在iphone6s(10.2)中测试时却不尽如人意(条件有限,其它机型未测),可谓一波三折。今天就从头到尾做一次总结记录。

一折

先从最简单的demo开始,主要代码如下:

第一页

下一页

第二页

下一页

第三页

下一页

第四页

html, body, .wrapper {

width: 100%;

height: 100%;

}

.wrapper {

position: relative;

max-width: 640px;

margin: 0 auto;

}

.hide {

display: none;

}

.page {

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值