项目场景：
提示：这里简述项目相关背景：
前提： 使用uniapp来做的微信小程序
有两级tab页面 要求手机的两边往中间滑时 要求（调用手机的物理返回按钮--有震动感） 返回上一页。具体如下图箭头所示：
问题描述
提示：这里描述项目中遇到的问题：
uniapp中有钩子函数 onBackPress(e) {} 可以返回上一页面（代码如下）但是此方法有平台差异，以为微信不支持这个方法
onBackPress(options){//这里是监听安卓物理返回键或者侧滑左滑返回方式
if(options.from=='navigateBack'){
return false
}else if(options.from=='backbutton'){//物理键默认返回上一级，我们在这里进行了处理
this.goBack()//走我们自己的方法
return true
}else if('xxxx){//也可以是其他方式
}
}
解决方案：
提示：这里填写该问题的具体解决方案：page-container
注： page-container属性
| 属性 | 类型 | 描述 |
| show | Boolean | 是否显示容器组件。默认值： false |
| z-index | Number | z-index 层级。默认值： 100 |
| overlay | Boolean | 是否显示遮罩层。默认值： true |
| duration | Number | 动画时长，单位毫秒。 默认值： 300 |
| position | String | 弹出位置。可选值： top、bottom、right、center。 默认值： bottom |
| round | Boolean | 是否显示圆角。默认值： false |
| close-on-slide-down | Boolean | 是否在下滑一段距离后关闭。 默认值： false |
| overlay-style | String | 自定义遮罩层样式。 |
| custom-style | String | 自定义弹出层样式。 |
| onBeforeEnter | EventHandle | 进入前触发。 |
| onEnter | EventHandle | 进入中触发。 |
| onEnterCancelled | EventHandle | 进入被打断时触发（通过 a: if 打断时不会触发）。 |
| onAfterEnter | EventHandle | 进入后触发。 |
| onBeforeLeave | EventHandle | 离开前触发。 |
| onLeave | EventHandle | 离开中触发。 |
| onLeaveCancelled | EventHandle | 离开被打断时触发（通过 a: if 打断时不会触发）。 |
| onAfterLeave | EventHandle | 离开后触发。 |
| onClickOverlay | EventHandle | 点击遮罩层时触发。 |
1：方式一
在uniapp微信小程序中，当添加侧滑功能后，由于page-container组件的使用，可能会导致页面滚动失效。这是因为page-container组件会改变当前页外层page标签的定位为position>，从而影响了页面的正常滚动。为了解决这个问题，可以通过添加特定的CSS样式来恢复页面的滚动功能。
解决这个问题的方法主要包括给外层page标签添加特定的CSS样式，具体为：
page{
position: relative !important;
top: 0px !important;
}
这些样式可以覆盖page-container自动添加的样式，从而恢复页面的正常滚动。这种方法已经在多个场景中被验证有效，包括在微信小程序中使用page-container时遇到的问题，以及在uniapp环境中使用page-container导致的滚动失效问题。通过添加这些样式，可以解决由于侧滑功能触发后，页面无法上下滚动的问题12。
此外，确保在配置page-container组件时，正确设置相关属性
2：方式二（如果方式一无效）
<template>
<view >
<view class="" style="height: 100rpx;">
</view>
<page-container
:overlay="false"
:show="isShowPage"
@beforeleave="beforeleave"
custom-style="height:calc(100vh - 100rpx);overflow:scroll">
<view class="" v-for="(item,index) in 100" :key="index">
测试{{index}}
</view>
</page-container>
</view>
</template>
<script>
export default {
data() {
return {
isShowPage:true,
};
},
onPullDownRefresh() {
},
created(options) {
},
watch: {
},
onReady() {},
methods: {
beforeleave(){
this.isShowPage = false; //这个很重要，一定要先把弹框删除掉
uni.reLaunch({
url: "/pages/index/indexNew"
});
},
},
onReachBottom: function() {
},
onPageScroll(e) {
},
//#ifdef MP
onShareAppMessage() {
return {
title: this.shareInfo.title,
path: '/pages/index/index'
};
},
//分享到朋友圈
onShareTimeline: function() {
return {
title: this.shareInfo.title,
imageUrl: this.shareInfo.img
};
}
//#endif
};
</script>
<style lang="scss">
</style>
