App 需要加一个类似于今日头条的侧滑返回功能,iOS本身有侧滑返回,主要是Android端。参考了一些文章,发现webview有提供滑动的API,可以做出侧滑返回的代码。这个是我侧滑返回的代码:
mounted() {
//获取上一页的webview
const pages = getCurrentPages(); //获取所有页面栈实例列表
const nowPage = pages[ pages.length - 1]; //当前页页面实例
const prevPage = pages[ pages.length - 2 ]; //上一页页面实例
if(typeof nowPage === 'undefined' || typeof prevPage === 'undefined')
return;
const currentWebview = nowPage.$getAppWebview(); //当前页页面Webview
const prevWebview = prevPage.$getAppWebview(); //上一页页面Webview
if(currentWebview && prevWebview) {
//监听当前侧滑窗口的右滑
currentWebview.drag({
direction: 'right',
moveMode: 'followFinger'
}, {
view: prevWebview,
moveMode: 'silent'
}, function(e) {
// 显示遮罩层
prevWebview.setStyle({ mask:'rgba(0,0,0,0.5)' });
if (e.type == 'end') {
//关闭遮罩层
prevWebview.setStyle({ mask:'none' });
//关闭当前页面
if(e.result)
uni.navigateBack({ delta: 1 });
}
});
}
}
但是出现问题,假如页面内也有横向滚动的组件,会冲突导致这些组件无法滚动。
这就很头疼,页面里面有一个swiper,只能右滑不能左滑了,这个页面只好先不加侧滑返回。有没有办法可以让这两者不冲突的吗?
或者是否可以设置一个区域,只有在这个区域drag函数才有效,例如只有在屏幕左侧区域按下才可以拖动webview?
经过测试,NVUE页面里面会冲突,vue页面则不会。
测试项目在下方。
愚者
各位领导内存溢出解决了没
2024-03-13 15:51