微信小程序嵌套H5页面左滑容易出现相同的页面，有什么解决方法吗？

Question

是我的webview的src属性加上了时间戳的原因吗？导致每次加载时webview都会认为是一个新页面，然后加到页面栈了。

```javascript
  webViewSrc: thatData.httpUrl+thatData.url+"?v="+new Date().getTime()+thatData.PinJie

我尝试了很多在h5页面中添加页面回退监听事件，在回退时使用了wx.miniProgram.navigateBack({  delta: 1, })也无大用，感觉webview内部还在跳转，但事实不是小程序在跳转。

附上结果图，bug

![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/a30ff1e87efe43ff886c070342b1f243.png "#left")

Answer 1

m0_67646599 上午好☀️☀️☀️️
本答案参考ChatGPT-3.5

问题的原因是每次加载H5页面时，都会带上一个不同的时间戳参数，这导致了微信小程序将每次加载的H5页面视为不同的页面，进而在页面栈中叠加显示。另外，尝试使用wx.miniProgram.navigateBack并不能解决问题。

要解决这个问题，可以考虑以下几个方案：

1. 移除时间戳参数：将H5页面加载的URL中的时间戳参数去除，这样微信小程序就会认为每次加载的是同一个页面，不会叠加显示。修改代码如下：

webViewSrc: thatData.httpUrl + thatData.url + thatData.PinJie

1. 使用web-view组件的缓存：web-view组件中有一个cache属性，默认是开启的。开启后，同一个URL在一定时间内只会加载一次，之后的加载都会使用缓存的内容。可以通过设置cache属性为true来尝试解决问题。修改代码如下：

<web-view src="{{webViewSrc}}" cache="{{true}}"></web-view>

1. 使用页面消息传递：在H5页面中，通过window.postMessage方法向小程序发送消息，在小程序中监听消息，在收到消息时执行相应的操作。可以通过在H5页面中监听返回事件，当用户点击返回按钮时发送消息给小程序，小程序收到消息后执行页面返回操作。具体实现可以参考以下代码：

在H5页面中添加如下代码：

window.addEventListener('popstate', function () {
  window.postMessage('goBack', '*');
});

在小程序页面中监听消息并执行返回操作：

onMessage(e) {
  if (e.detail === 'goBack') {
    wx.navigateBack({ delta: 1 });
  }
}

1. 在小程序页面中使用Navigator组件：在小程序页面中使用navigator组件来打开H5页面，而不是使用web-view组件。navigator组件在切换页面时会自动进行页面栈的管理，可以避免页面叠加显示的问题。修改代码如下：

<navigator url="{{webViewSrc}}">进入H5页面</navigator>

以上是一些解决方法的示例，可以根据具体情况选择合适的方法来解决问题。