iOS微信H5页面橡皮回弹效果的踩坑记录

业务需求

近期开发的项目有一部分是与微信公众号相关的H5页面，在Android端微信上页面效果展示无异常，但是在 iOS端 微信多多少少会出现一些意想不到的bug。此次主要针对移动端H5页面在iOS端产生的 橡皮回弹（橡皮筋效果）问题做一下相关记录，希望对遇到类似问题的同学有所帮助。

🐕方案一：使用 inobounce.js

inobounce.js  github地址

在 html主页面 的 header 标签中引入 inbounce.js，即  。当引入此文件之后，iOS端整个页面都无法滑动或滚动，若想滚动的元素能够实现滚动效果，则需要对滚动区域设置固定的高度，即 height、max-height，同时也要设置 overflow: auto，实现页面滑动。为防止iOS端页面滚动发生卡顿现象，需要对滚动区域设置 -webkit-overflow-scrolling: touch 属性。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>inobounce</title>
		<script src="inobounce.js"></script>
		<style>
			ul {
				height: 115px;
				border: 1px solid gray;
				overflow: auto;
				-webkit-overflow-scrolling: touch;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>List Item 1</li>
			<li>List Item 2</li>
			<li>List Item 3</li>
			<li>List Item 4</li>
			<li>List Item 5</li>
			<li>List Item 6</li>
			<li>List Item 7</li>
			<li>List Item 8</li>
			<li>List Item 9</li>
			<li>List Item 10</li>
		</ul>
	</body>
</html>

🐒 方案二：CSS样式处理（推荐）

偶然间在iOS端打开一些公众号的H5活动页，没有产生所谓的橡皮回弹效果，于是就想着是否可以采用此效果来解决iOS端网页产生的橡皮回弹效果。最终尝试此方法可以实现iOS端页面固定，不产生橡皮回弹效果。在系统版本iOS13+上的设备上已解决橡皮筋效果，系统版本iOS12+的设备上没有尝试，后续准备找iOS12+的苹果手机进行进一步的测试，其次再将测试结果进行补充。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>iOS橡皮回弹</title>
	</head>
	<body>
		<!-- 内容区 -->
		<div id="app"></div>
	</body>
</html>

主要CSS代码：

/* 初始化 */
* {
	margin: 0;
	padding: 0;
}
/* 基本样式 */
html,
body {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
body {
	box-sizing: border-box;
	position: relative;
}
/* 超出滚动 */
#app {
	width: 100%;
	height: 100%;
	overflow-y: auto;
}

🐬总结：

总的来说，两种方案我在实际开发中都进行了尝试。方案一在微信中浏览H5网页时可以完美解决橡皮回弹效果；当H5页面在iOS端微信授权跳转时，底部会有一个导航条，此时导航条也有可能被遮盖，点击导航条两端的按钮没有反应。在Safari浏览器打开H5页面时，网页的顶端地址栏和底部菜单栏会有一定的遮挡，体验效果不是很理想，最终此方案被pass掉了。方案二是我实际工作中使用的，回弹效果得到了一定的改善。体验效果较方案一有了很大的提升。

如果页面有微信授权，以及页面路径的跳转，此时iOS端微信打开的网页底部会多出一个导航条，同样Android端微信不会出现类似导航条。若没有微信授权以及页面跳转，则两方案均可选；若有微信授权，推荐使用方案二。

到此这篇关于iOS微信H5页面橡皮回弹效果的文章就介绍到这了,更多相关iOS微信H5页面橡皮回弹内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • iOS微信H5页面橡皮回弹效果的踩坑记录

    业务需求 近期开发的项目有一部分是与微信公众号相关的H5页面,在Android端微信上页面效果展示无异常,但是在 iOS端 微信多多少少会出现一些意想不到的bug.此次主要针对移动端H5页面在iOS端产生的 橡皮回弹(橡皮筋效果)问题做一下相关记录,希望对遇到类似问题的同学有所帮助.

  • 微信小程序组件生命周期的踩坑记录

    微信小程序组件生命周期的踩坑记录

    组件生命周期,通常是我们业务逻辑开始的地方. 如果业务场景比较复杂,组件生命周期有不符合预期的表现时, 可能会导致一些诡异的业务bug,它们极难复现和修复. 组件 attached 生命周期执行次数 按照通常的理解,除moved/show/hide等生命周期可能多次执行外, 严格意义上与组件加载相关的生命周期,如:created.attached.ready等,每个组件实例应该只执行一次.但是事实真的如此吗? 背景 这个问题的发现,源于我们在小程序的报错日志中, 收到大量类似Cannot red

  • 微信小程序npm引入vant-weapp的踩坑记录

    微信小程序npm引入vant-weapp的踩坑记录

    微信小程序项目使用npm安装vant-weapp的正确步骤 使用npm安装vant-weapp 到项目根目录下: npm i vant-weapp -S --production 然后再详情中选中使用npm模块,然后点击工具栏中的构建npm.本以为这样就可以安装成功了,结果 没有找到npm包 这让我纠结了一个早上.看了文档,琢磨了很久,最后研究出问题的关键. 第一步:使用cmd进入项目根目录:npm init 然后一直按回车 第二步:输入你要安装的文件(npm i vant-weapp -S -

  • iOS手动添加新字体的步骤和踩坑记录

    iOS手动添加新字体的步骤和踩坑记录

    目录 前言 字体添加 1.引入字体文件 2.配置 Info.plist 文件 3.解决添加新字体不生效问题 4.代码中设置字体 总结 前言 最近在一个日记软件,发现系统的默认字体过于丑陋,于是有了更改应用字体的想法.完成操作的过程中踩了一些小坑,写下此文记录一下,希望能对后人有所帮助. 字体添加 1.引入字体文件 直接将下载好的字体文件拖入项目中 2.配置 Info.plist 文件 在 Info.plist 文件中添加新行 "Fonts provided by application"

  • 解决IOS端微信H5页面软键盘弹起后页面下方留白的问题

    前言:微信H5项目,ios端出现了软键盘输完隐藏后页面不会回弹,下方会有一大块留白 最近微信和ios都有版本升级,不知道是哪边升级造成的,但是经过测试,软键盘收起后,再滚动一下页面,下面的留白就会消失.所以只要在输入完毕后模拟一下这个"滚动"的操作,就能解决问题了. 如果是用vue写的: <input type="text" @blur="fixScroll" placeholder="请输入xxx"/> //me

  • Vite vue3多页面入口打包以及部署踩坑实战

    Vite vue3多页面入口打包以及部署踩坑实战

    目录 为什么需要多入口? 一.改造项目 二.vite.config.ts配置 三.部署 总结 为什么需要多入口? 公司原生的移动端上需要用webview引入一些性能要求不高的H5页面,初步考虑后选择用vue试个水,前期页面跳转选择使用vue-router,测试过程中在安卓高版本下右滑返回效果尚可,ios端初步尝试使用的最左侧touch事件移动距离检测以及router判断index添加过场动画,但是整体的效果依然达不到下图的效果. 原先项目中是使用多个html页面以及原生自带的协议去打开html,

  • 微信小程序开发篇之踩坑记录

    微信小程序开发篇之踩坑记录

    最近参与开发了公司的第一款小程序,开发体验基本类似于基于webview的混合式开发,可以调用官方强大的api,但也有一些坑或者说不习惯的地方.这篇文章从实用性出发,记录了开发过程中的一些问题: 1. 样式优先级混乱 在使用button组件时,发现在class中设置width不生效,下面贴上代码: .my-button{ width: 140rpx; height: 60rpx; line-height: 60rpx; padding: 0; } 经过微信调试工具排查后,发现user agent的

  • Echarts在Taro微信小程序开发中的踩坑记录

    Echarts在Taro微信小程序开发中的踩坑记录

    背景 近期笔者在使用Taro进行微信小程序开发,当引入Echarts图表库时,微信检测单包超限2M的一系列优化措施的踩坑记录,期望能指导读者少走一些弯路. 为什么选择Echarts? 微信小程序目录市面上使用最多的两款图表库,如下: echarts-for-weixin--echarts微信小程序版本 wx-charts--基于微信小程序的图表库 对比两款图表库优缺点刚好相反. echarts-for-weixin:功能强大,但体积非常大 wx-charts:功能相对简单,但体积小 由于笔者对e

  • JavaScript禁止微信浏览器下拉回弹效果

    本文实例为大家分享了JavaScript禁止微信浏览器下拉回弹的效果,供大家参考,具体内容如下 方法1: <script type="text/javascript"> var overscroll = function(el){ el.addEventListener('touchstart', function(){ var top = el.scrollTop; var totalScroll = el.scrollHeight; var currentScroll

  • vue中使用微信公众号js-sdk踩坑记录

    最近又在vue中捣鼓了下微信公众号api的接入,不得不说这里边水是真的深啊,上次分享了微信授权登录和js-sdk签名的部分,其中很多朋友私信我表示了疑惑,今天我就再次尝试理顺一下这里边的坑吧: 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用微信分享.扫一扫.卡券.支付等微信特有的能力,为微信用户提供更优质的网页体验. 分享页面到朋友圈 上文是从官方文档

随机推荐