uniapp小程序webview中顶部导航栏加返回
时间: 2023-07-30 11:06:21 浏览: 239
vue返回顶部插件
在uniapp小程序的webview中,如果需要在顶部导航栏中添加返回按钮,可以尝试以下步骤:
1. 在webview所在的页面中,通过`onLoad`生命周期函数获取webview组件对象并存储在data中:
```
onLoad() {
this.$refs.webview = uni.createWebViewContext('webview');
}
```
2. 在webview组件中添加`bindmessage`事件,用于接收来自webview的消息:
```
<web-view src="{{url}}" bindmessage="onMessage"></web-view>
```
3. 在`onMessage`事件处理函数中,判断接收到的消息是否为返回操作,如果是,则调用`webview`组件对象的`navigateBack`方法返回上一页:
```
onMessage(e) {
if(e.detail.data === 'back') {
this.$refs.webview.navigateBack();
}
}
```
4. 在webview中添加返回按钮,点击按钮时通过`postMessage`方法发送消息到小程序:
```
<button onclick="window.top.postMessage('back', '*')">返回</button>
```
这样就可以在webview中的顶部导航栏中添加返回按钮了。需要注意的是,如果webview的页面是外部链接,需要确保外部页面中的返回按钮能够正常返回,否则需要在webview中添加自定义返回按钮。
阅读全文