vue在ios返回上一路由白屏

39 篇文章 0 订阅
18 篇文章 0 订阅

原文链接

问题描述:

进入A页面——>B页面——>ios自带的返回——>白屏出现——>手动点击白屏处——>问题解决

问题

原因是,经过排查,发现在ios 机器上使用webview 开发Vue项目时候,go history (-1),无法将body 的高度拉掉,使得遮住,触发轻点击,方可消除该遮罩

解决的理论:用于最重要的html 容器是container,然而因为设置html、body高度是100%,从而造成了 container 撑开父级,但浏览器默认滚动的scroll 并不是 container(可能我这里认识是错的),而是body,某些因素,造成返回history 后,无法复原(ios 的锅),为此,我们将 container 进行了绝对定位,并让它重新成为 scroll 的对象,从而解决问题

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
}
.container {
  width: 100%;
  height: 100%;
  background: #fff;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  position: absolute;
  left:0;
  top:0;
}
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue是一种基于JavaScript的前端框架,它可以帮助我们构建交互式的Web界面。iOS是苹果公司的操作系统,运行在iPhone和iPad等设备上。背景视频是一种在网页或应用程序中播放的视频。因此,“Vue背景iOS视频”表示在Vue框架中使用iOS设备播放背景视频。 要在Vue中实现背景iOS视频,我们可以遵循以下步骤: 1. 首先,确保在Vue项目中安装了必要的依赖项,例如VueVue CLI等。 2. 接下来,我们需要准备一个iOS设备上的视频。可以使用合适的工具将视频转换为适用于Web播放的格式,如MP4或WEBM。确保视频文件大小适中,以便在网页加载时不会太慢。 3. 然后,在Vue组件中添加一个容器元素,用于放置视频。 4. 在Vue组件的相关生命周期钩子中,例如"mounted",使用适当的HTML元素和属性将视频添加到容器中。在这里,我们可以使用HTML的视频元素(<video>)和相关属性,如“src”、“autoplay”和“loop”等。这将确保视频在页面加载完成后自动播放,并且循环播放背景。 5. 最后,在Vue组件的CSS样式中,使用适当的选择器定位并修饰视频容器。可以设置其位置、尺寸和其他样式属性,以使其适应背景布局,并且与其他元素正确叠加。 通过上述步骤,我们就可以在Vue框架中实现背景iOS视频效果。当用户访问应用程序或网页时,视频将作为背景自动播放,并且可以循环播放。这种效果可以为用户提供更吸引人的视觉体验,并使应用程序或网页更具吸引力。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值