uniapp微信小程序page-container导致滚动失效/向下偏移，返回上一页/左滑取消返回上一页

项目场景：

提示：这里简述项目相关背景：

前提：  使用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(){
			    let pageList = getCurrentPages();
			    // 如果只有当前页面一个历史记录 返回时返回到商品分类
			    if(pageList.length==1){
				    this.isShow = false; //这个很重要，一定要先把弹框删除掉 reLaunch()
				    uni.reLaunch({
					    url: "/pages/goods_cate/goods_cate"
				    });
			    }else{
				    // 如果不止 一个 历史记录 那么返回上一页时返回到上一页面
				    this.returns()
			    }	
		    },
            // 后退
		    returns() {
			    let pagesLength = getCurrentPages().length;
			    console.log("pagesLength=======",pagesLength)
			    if(pagesLength>1){
				    // #ifdef H5
				    return history.back();
				    // #endif
				    // #ifndef H5
				    return uni.navigateBack({
					    delta: 1
				    });
				    // #endif
			    }else{
				    return uni.switchTab({
					    url: '/pages/index/index',
					
				    });
			    }
			
		    },

		},

		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>