当前位置: 首页 > news >正文

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属性

属性类型描述
showBoolean是否显示容器组件。默认值: false
z-indexNumberz-index 层级。默认值: 100
overlayBoolean是否显示遮罩层。默认值: true
durationNumber动画时长,单位毫秒。
默认值: 300
positionString弹出位置。可选值: top、bottom、right、center。
默认值: bottom
roundBoolean是否显示圆角。默认值: false
close-on-slide-downBoolean是否在下滑一段距离后关闭。
默认值: false
overlay-styleString自定义遮罩层样式。
custom-styleString自定义弹出层样式。
onBeforeEnterEventHandle进入前触发。
onEnterEventHandle进入中触发。
onEnterCancelledEventHandle进入被打断时触发(通过 a: if 打断时不会触发)。
onAfterEnterEventHandle进入后触发。
onBeforeLeaveEventHandle离开前触发。
onLeaveEventHandle离开中触发。
onLeaveCancelledEventHandle离开被打断时触发(通过 a: if 打断时不会触发)。
onAfterLeaveEventHandle离开后触发。
onClickOverlayEventHandle点击遮罩层时触发。

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>


http://www.mrgr.cn/news/15665.html

相关文章:

  • 高标准城市照明智能化应用,创新城市节能之光
  • 推荐11款设备管理系统,系统功能一目了然!
  • 再次进阶 舞台王者 第八季完美童模全球赛 荣耀大使【刘思瑶】赛场秀场超燃合集!
  • 坑——Redis集群key事件通知
  • java中的@注解语法是什么原理,怎么实现的?
  • 破解电商数据分析难题,优化运营策略的秘诀
  • 供应商管理概述及系统软件推荐
  • Git学习尚硅谷(002 git常用命令)
  • 使用docker部署project-exam-system(项目)
  • 羊大师:防疫不松懈:开学季儿童个人防护小贴士
  • 【vue3】详解单向数据流,大家千万不用为了某某而某某了
  • TD学习笔记————中级教程总结(下)
  • RKNPU2从入门到实践 ---- 【9】使用RKNPU2的C API接口将RKNN模型部署在RK3588开发板上
  • JavaWeb——前端工程化
  • 行得稳,跑得远,美团如何做到长期主义持续发力?
  • 已解决**Java OutOfMemoryError: GC Overhead Limit Overload - 问题分析与解决方法**
  • springboot学习(2)
  • 斯坦福UE4 C++课学习补充24:伤害数值
  • 【动态规划】两个数组 / 字符串的dp问题(子序列、子数组问题、匹配问题、字符串问题)
  • 什么是反应诱导重构