DCloud_App_Array
DCloud_App_Array
  • 发布:2014-11-14 21:21
  • 更新:2024-04-18 15:58
  • 阅读:46585

iOS平台使用Webview窗口的侧滑返回效果

分类:HTML5+

HBuilder 5+ Runtime 0.13.0以后版本支持侧滑返回功能(从屏幕左侧向右滑动可关闭Webview窗口),效果如下:

默认所有Webview窗口都是开启此功能的,并且侧滑返回后会关闭Webview窗口。

使用Webview窗口的侧滑返回功能

通过WebviewStyle的popGesture单独控制每个Webview的侧滑返回效果,取值:

效果
none 无侧滑返回功能
close 侧滑返回关闭Webview窗口
hide 侧滑返回隐藏webview窗口

侧滑返回隐藏或关闭Webview窗口的逻辑与调用hide和close方法一致。

5+APP应用示例

  1. 创建webview支持侧滑返回:

    var wv=plus.webview.create('url','id',{'popGesture':'close'});  
    wv.show();  
    // 或这样写  
    var wv=plus.webview.open('url','id',{'popGesture':'close'});
  2. 动态改变webview的侧滑返回功能:

    var wv=plus.webview.currentWebview();  
    // 关闭侧滑返回功能  
    wv.setStyle({'popGesture':'none'});  
    // 侧滑返回后关闭webview  
    wv.setStyle({'popGesture':'close'});  
    // 侧滑返回后隐藏webview  
    wv.setStyle({'popGesture':'hide'});

uni-app应用示例

在pages.json对应页面的style下添加popGesture属性:

        {  
            "path" : "pages/component/text/text",  
            "style" : {  
                "navigationBarTitleText" : "text",  
                "popGesture": "none"  
            }  
        }

修改应用的窗口默认

为了提升用户的体验效果,默认所有Webview窗口都是侧滑返回关闭("close"),也可以在manifest.json中修改默认值。
打开应用manifest.json文件,切换到代码视图,添加popGesture字段,值可为WebviewStyle的popGesture取值("hide"|"close"|"none")。

  • 5+APP(WAP2APP)应用在manifest.json的"plus"->"popGesture"节点配置:
  • uni-app应用,只能配置"close"|"none",不能配置为"hide",默认值为"close",在manifest.json的"app-plus"->"popGesture"节点配置:

注意:仅iOS平台支持侧滑返回功能

6 关注 分享
Trust jwenlee 5***@qq.com 陈可乐 我是好人 1***@qq.com

要回复文章请先登录注册

2***@qq.com

2***@qq.com

"style": {
"navigationBarTitleText": "学情测试",
"navigationStyle": "custom",
"app-plus": {
"popGesture": "none",
"bounce": "none",
"disableSwipeBack": true // 禁止IOS侧滑事件
}
}
失效。。。。
2024-04-18 15:58
9***@qq.com

9***@qq.com

1、manifest.json
"app-plus" : {
"popGesture" : "none"

2、pages.json
"style": {
"popGesture": "none"
}

3、 添加 {'popGesture':'close'}
this.webView = plus.webview.open(
'',
'barCodeBox', {
top: '70px',
width: '100%',
height: '270px'
},
{'popGesture':'close'}
)
this.webView.setStyle({'popGesture':'close'});

4、关闭
onHide() {
// #ifdef APP-PLUS
this.webView.close();
// #endif
},
onUnload() {
// #ifdef APP-PLUS
this.webView.close();
// #endif
},

配置了以上的,部分机型偶尔会出现 侧滑闪退的情况,有的就好好的,有人知道怎么解决吗?
2022-09-30 11:54
1***@qq.com

1***@qq.com

回复 d***@foxmail.com :
我好像就是你说的这个问题,大佬,留个联系方式,帮忙解决下呗,有偿
2022-08-21 16:29
3***@qq.com

3***@qq.com

var w=plus.webview.create(URL,’webviewId',{'top':'100px'},{'popGesture':'close'});设置top后,滑动功能失效
2022-04-27 12:05
3***@qq.com

3***@qq.com

设置样式top后,ios左滑功能失效
2022-04-27 12:04
3***@qq.com

3***@qq.com

不支持Android平台吗?那Android平台侧滑返回要怎么实现?
2022-04-21 16:33
2***@qq.com

2***@qq.com

回复 d***@foxmail.com :
大佬,能加你微信请教你这个侧滑返回的问题吗。我被这个问题困扰好长时间了。望回复
2021-10-27 17:43
7***@qq.com

7***@qq.com

回复 n***@126.com :
刚才试了一下 这个还是不起作用
2021-06-03 18:24
d***@foxmail.com

d***@foxmail.com

经测试发现不生效的原因,并成功实现测滑效果。

项目类型:hubuilder x html5+ 项目

开发框架:
vue 2.x
vuetify
vue-router

问题原因猜测:
1. 测滑效果**可能**基于类似堆栈的前提,测滑实际上是出栈的效果。
2. 普通h5应用应该不会存在问题,问题大多发生在单页架构的应用上。
3. 原因是只有一个webview,如果再关闭的话,就等价于退出应用了,所以在这种情况下**应该**是被忽略测滑功能的(可以对比一下当chrome只有一个tab的时候, 关闭tab 等价于关掉浏览器的情况)。

问题解决方案:
**模拟堆栈**,核心方案是在页面发生跳转时不在本页跳转,而是新开一个webview进行跳转,这样测滑就可以返回到上一个页面的完整状态,而不是基于返回了。
2021-01-27 17:00
n***@126.com

n***@126.com

wap2app
1、根目录新建文件夹:js,新建js文件:main.js
2、main.js里的编写:

wap2app.plusReady(function() {
// 关闭侧滑返回功能
var self = plus.webview.currentWebview();
self.setStyle({'popGesture':'none'});
})
3、sitemap.json文件里配置:

"global": {
"appendJs": "js/main.js"//这里引入文件
}
2020-09-23 11:46