(带效果动图)H5在详细页点返回,返回时列表页停留在原来的位置

前言

  • 有了vue以后,我H5都是用vue写了,然后使用vant(轻量、可靠的移动端 Vue 组件库)布局,一个网页就特别容易的完成了,然后就是要优化网页。
  • 在工作中,H5主要被用来内嵌进移动端(ios、小程序、安卓),而各大应用中,用的最多的数据结构就是列表。用H5做列表网页,有一个很大的弊端就是:往下滑列表,然后点击跳转到详情网页再返回时,会发现列表页刷新并返回顶部了。
  • 这个弊端和浏览器有关系。(具体原因感兴趣的自查百度)
    • Microsoft Edge浏览器就能返回时列表停留在原来的位置
    • 红米手机上自带的浏览器也能返回时列表停留在原来的位置
    • 谷歌浏览器返回时就会刷新页面滑到顶部
    • ios、安卓的webview返回时就会刷新页面滑到顶部(如微信内部访问网页)

未优化前效果展示

在微信内部浏览器,往下滑列表,然后点击跳转到详情网页再返回时,会发现列表页刷新并返回顶部了,如图所示:

优化后效果展示

还是在微信内部浏览器

实现

思路

  • 既然是因为跳转到新的网页然后返回才会导致这个问题,我就不让跳到新网页,直接在原网页里内嵌。内嵌网页的方式:iframe。
  • 做到内嵌网页后,我们要实现点击安卓手机的返回键能够把这个内嵌网页关掉。应该有很多种方式,我自己做的是:监听返回键事件,然后执行自己的操作。

代码

1、html 代码

说明:

  • 有一个大盒子div,宽度高度与屏幕一样,即全屏(width: 100%; height: 100%;),显示位置置前(position: fixed; z-index: 999;),这两条一定要。
  • 居中 display: flex; justify- content: center;  align-items: center;
  • showPage 来控制内嵌网页的显示与隐藏。
  • iframe 的宽高为父容器的100%,即全屏。src放入子页面的url路径。
<div v-if="showPage == '1' " style="position: fixed; z-index: 999;display: flex; justify-    
    content: center;  align-items: center; background: white; width: 100%; height: 100%;">

    <iframe frameborder=0 width=100% height=100% :src="subPage"></iframe>

</div>

2、javascript vue 代码

说明:按照思路

  • 用变量showPage 来控制内嵌网页的显示与隐藏;
  • pushHistory()放入停留在之前浏览的位置的url,这个一定不要漏,不然返回的时候就直接退出列表页了!
  • 监听返回键:返回上一个网页的事件是无法拦截的,所以我们只能添加停留在之前浏览的位置的url也就是原url+#,然后在返回键事件里把内嵌网页隐藏掉,我们就能成功的使H5返回时不刷新页面,列表保持在原来的位置。
data: {
    showPage: "0", // showPage初始化,0隐藏,1显示
    ......
}

methods: {
    // 使用pushState方法往history里增加url链接:原url加个#,还是原页面并且停留在之前浏览的位置
    pushHistory() {
        var state = {
            title: "title",
            url: "#"
        }
        window.history.pushState(state, "title", "#");
    },

    // 打开内嵌网页
    getScore(name, score) {
        const that = this
        // 内嵌网页的url
        that.subPage = 'score.html?name=' + name +'&score=' + score
        // 内嵌网页显示
        that.showPage = '1'
        // 放入停留在之前浏览的位置的url,这个一定不要漏,不然返回的时候就直接退出列表页了!
        that.pushHistory()
        // 监听返回键
        window.addEventListener("popstate", function(e) {
            // 内嵌网页隐藏
            that.showPage = '0'
        })
    },

    // 打开另一个内嵌网页 
    getRatings(name, date) {
        const that = this
        that.subPage = 'ratings.html?name=' + name + '&date=' + date;
        that.showPage = '1'
        that.pushHistory()
        window.addEventListener("popstate", function(e) {
            that.showPage = '0'
		})
    },
    ......
}

3、内嵌网页,标题栏的返回按钮点击事件(ios不像安卓手机那样屏幕底部有返回键,所以网页顶部要布置一个返回按钮)

onBack() {
    window.history.back(-1);//返回上一层
},

参考资料

JS监听浏览器的返回事件_柏灿的博客-CSDN博客_监听浏览器返回事件

  • 5
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
如果你是在 React Native 中使用 WebView 来加载 H5 面,那么你可以通过以下步骤来设置指定返回面: 1. 在 H5 面中,当用户返回按钮,通过 JavaScript 发送消息到 React Native 端,告知需要返回到哪个面。 2. 在 React Native 端,监听 WebView 的 onMessage 事件,当收到来自 H5 面的消息,调用 NativeModules 的方法返回指定面。 具体实现代码如下: 在 H5 面中,添加以下代码: ```javascript // 当用户返回按钮,通过 postMessage 方法向 React Native 端发送消息 window.postMessage(JSON.stringify({ type: 'back', url: '指定返回面 URL' })) ``` 在 React Native 端,添加以下代码: ```javascript import { NativeModules } from 'react-native'; // 监听 WebView 的 onMessage 事件 <WebView onMessage={(event) => { const data = JSON.parse(event.nativeEvent.data); if (data.type === 'back') { // 调用 NativeModules 的方法返回指定面 NativeModules.NavigationModule.goBack(data.url); } }} /> // 在 NativeModules 中定义 NavigationModule,实现返回指定面的方法 const NavigationModule = { goBack(url) { // 判断当前面是否是指定面,如果是则返回上一,否则跳转到指定面 if (this.props.navigation.state.routeName === url) { this.props.navigation.goBack(); } else { this.props.navigation.navigate(url); } } }; ``` 注意:以上代码只是示例,具体实现需要根据你的项目结构和需求进行调整。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值