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

本文主要是介绍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导致滚动失效/向下偏移，返回上一页/左滑取消返回上一页的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---