本文主要是介绍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(){this.isShowPage = false; //这个很重要，一定要先把弹框删除掉 uni.reLaunch({url: "/pages/index/indexNew"});},},onReachBottom: function() {},onPageScroll(e) {},//#ifdef MPonShareAppMessage() {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>
这篇关于uniapp微信小程序page-container导致滚动失效/向下偏移，返回上一页/左滑取消返回上一页的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
