page-container在使用wx:if销毁时页面滚动不了

最新推荐文章于 2025-03-13 22:53:39 发布
最新推荐文章于 2025-03-13 22:53:39 发布
阅读量556 收藏 1
点赞数 3
文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rawqraq/article/details/131416815
版权
在微信小程序中，使用page-container组件并绑定show属性来隐藏组件时，可能会导致页面滚动功能失效，因为页面会生成一个固定定位的元素。为了解决这个问题，可以通过添加CSS样式到page，如设置`position:relative!important;top:0px!important;`来覆盖原有的固定定位，从而恢复页面的正常滚动。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在使用微信小程序page-container组件时候,通过将show绑定的值变为false 来使组件隐藏。

但隐藏后会出现页面无法滚动的问题。

此时页面 page 会多一个固定定位。 覆盖这个样式，在page的样式里加  position: relative !important;  top: 0px !important; 就可以解决滚动的问题

微信小程序-页面开发
陆卿之的博客
01-02 3694
页面开发
微信小程序自定义弹窗，禁止page页面滚动。
一寸灰_du的博客
06-09 1011
微信小程序自定义弹窗，禁止page页面滚动。
ARNPageContainer:水平滚动分页 ViewController 容器
06-24
ARN页面容器 它的灵感来自以下产品。 用法 要运行示例项目， pod install克隆 repo，然后从 Example 目录运行pod install 。 要求 iOS 7.0+ 弧 安装 ARNPageContainer 可通过。 要安装它，只需将以下行添加到您的 Podfile 中： pod "ARNPageContainer" 依赖 执照 ARNPageContainer 在 MIT 许可下可用。 有关详细信息，请参阅许可证文件。
微信小程序page-container遇到返回拦截报errMsg: “fail:navigateBack intercepted“导致页面锁死
最新发布
weixin_41334434的博客
03-13 322
page-container返回拦截 和 返回fail errMsg: "fail:navigateBack intercepted
微信小程序打开视图容器page-container, 部分机型不会滚动回顶部
a532443304的博客
06-07 1544
微信小程序page-container部分机型不会滚动回顶部
uniapp微信小程序page-container导致滚动失效/向下偏移，返回上一页/左滑取消返回上一页
m0_63026408的博客
08-30 1300
前提： 使用uniapp来做的微信小程序有两级tab页面 要求手机的两边往中间滑时 要求（调用手机的物理返回按钮--有震动感） 返回上一页。
小程序页面不能滚动
abysk520520的博客
04-18 1150
有可能是上一个页面有picker弹框没有关闭，直接跳转的页面，有可能导致跳转后的页面不能滚动。
微信小程序wx:if并未完全隐藏消失，出现空白情况的解决办法
weixin_45004544的博客
03-27 900
解决办法：不使用wx:if条件语句，在容器（一般是）的class属性中使用三元运算，并在不显示的class属性中设定display: none;微信小程序在使用wx:if后，可以将不满足条件的数据、容器等隐藏起来，但容器并未完全消失，原有位置变成一片空白，无法写入新容器和数据。例：class =“xxx == xx?‘X’ : ‘x’”
微信小程序和uni-app面试高频知识点
qq_53694927的博客
11-27 1059
微信小程序和uni-app面试高频知识点
微信小程序使用 ECharts
互联网从业者/大数据架构师/全栈开发者
06-14 3280
echarts-for-weixin 是 ECharts 官方维护的一个开源项目，提供了一个微信小程序组件（Component），我们可以通过这个组件在微信小程序中使用 ECharts 绘制图表。echarts-for-weixin 自身包含很多使用示例，方便我们参考。...
【愚公系列】《微信小程序开发解析》010-媒体组件
热门推荐
时光隧道
07-13 5万+
随着微信小程序的普及，开发者们越来越重视如何在小程序中呈现丰富的多媒体内容。媒体组件作为微信小程序的重要组成部分，为开发者提供了强大的工具来嵌入和控制图片、音频、视频等多媒体元素，使得用户体验更加生动和互动。本篇文章将详细介绍微信小程序中的媒体组件，包括其主要类型、使用方法及其在实际开发中的应用场景。我们将通过具体实例和代码示例，帮助大家快速掌握这些组件的基本用法和高级技巧，提升开发效率和应用品质。同时，我们还会分享一些常见问题的解决方案及最佳实践，帮助开发者避免常见的坑，提高项目的稳定性和用户满意度。
微信小程序中使元素占满整个屏幕高度实现方法
01-03
微信小程序中使元素占满整个屏幕高度实现方法 在项目中经常要用到一个容器元素占满屏幕高度和宽度，然后再在这个容器元素里放置其他元素。 宽度很简单就是width:100% 但是高度呢，我们知道的是height:100%必须是在父元素的高度给定了的情况下才可以。 以前我的做法是用js获取屏幕的高度，然后将其赋值给height， 屏幕高度在网页中为:window.innerHeight; 在微信小程序中则需要调用wx.getSystemInfo接口，然后通过setData赋值 但是显然通过js来进行的，效率上肯定不如css直接给定样式。 于是我们使用另一种方法: 在网页中设置body,html{hei
微信小程序实现滑动翻页效果(完整代码)
12-30
微信小程序实现滑动翻页效果，效果图如下所示： 源码： <swiper-item cla
微信小程序图表插件高级技巧揭秘：如何精通wx-charts
本文首先概述了微信小程序图表插件的发展背景和应用概况，然后深入探讨了wx-charts插件的基础使用方法和定制技巧，包括图表组件的分类、配置、数据绑定以及样式定制。接着，本文着重介绍了一些高级应用技巧，如动态...
微信小程序弹出层禁止滚动穿透
sxy323的博客
04-19 1413
uniapp实现微信小程序中禁止滚动穿透、打开弹出层禁止底部页面滚动
利用ViewPager、PagerTabStrip实现滚动导航
u013914441的博客
09-18 240
一，建立一个布局如下 其中android.support.v4.view是需要通过导入的外部包，一般也会有自带，但是自带的不能查看源码<android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_paren
基于微信小程序原生开发从头实现小程序常见功能（基础篇）
12-25
      基于微信小程序原生开发从头实现小程序常见功能，包括小程序开发基础知识及常用开发功能如登录、找回密码、文件上传、多媒体功能、编辑表单、详情界面、列表界面等，并实现简单的在线预约系统相关功能，具体内容如下：常见功能实现：实现用户登录（用户名密码登录、手机验证码登录、小程序自动登录）、找回密码、用户注册、小程序授权、修改密码、关于我们、意见反馈、系统消息、表单录入、详情查看、列表查看等功能。公共常用组件：实现公共组件的抽离以便能进行扩展及复用，包括输入框、选择框、分步组件、swiper组件、视频播放、富文本编辑、文件上传、视频上传、编辑表单、详情界面、列表界面、tab组件、地图等常用的组件。源码获取说明：点击 https://gitcode.net/invite_link?invite_code=UdfJQACWXRWX9z9NJy_x 申请加入gitcode项目，申请之后会进行审核，购买了课程的用户会直接审核通过。使用会员免费看的用户请留言一下账号才会审核通过。若长时间未审核通过请留言或私信联系处理，留言时请备注下gitcode中的昵称。
微信小程序开发（八）：page-container弹窗与share-element动画
Dominic_W的博客
04-09 1万+
page-container页面容器，可以在当前页面中弹出一个半屏的弹窗、或者在页面内加载一个全屏的子页面。 当page-container组件显示时，用户进行返回操作时会关闭page-container容器，而不会关闭当前页面。 每个页面最多只能显示一个page-container，如果在一个页面代码中定义了多个page-container，只有文档流中的第一个page-container能正常显示。 属性 show：是否显示page-container组件 duration：动画时长 z-index：默
微信小程序共享元素+ page-container假页实现弹出效果
苏苏就是小苏苏的博客
05-06 1万+
1.实现效果 2.实现原理 page-container page-container 小程序如果在页面内进行复杂的界面设计（如在页面内弹出半屏的弹窗、在页面内加载一个全屏的子页面等），用户进行返回操作会直接离开当前页面，不符合用户预期，预期应为关闭当前弹出的组件。 为此提供“假页”容器组件，效果类似于 popup 弹出层，页面内存在该容器时，当用户进行返回操作，关闭该容器不关闭页面。返回操作包括三种情形，右滑手势、安卓物理返回键和调用 navigateBack 接口。 tip: 当前页面最多只有
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值