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

最新推荐文章于 2024-04-24 00:15:00 发布
最新推荐文章于 2024-04-24 00:15:00 发布
阅读量376 收藏 1
点赞数 2
文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rawqraq/article/details/131416815
版权

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

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

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

小任不秃头
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
利用ViewPager、PagerTabStrip实现滚动导航
u013914441的博客
09-18 207
一，建立一个布局如下 其中android.support.v4.view是需要通过导入的外部包，一般也会有自带，但是自带的不能查看源码<android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_paren
react-full-page:使用React全屏滚动
04-28
使用React全屏滚动 import React from 'react' ; import { FullPage , Slide } from 'react-full-page' ; export default class FullPageExample extends React . Component { render ( ) { return ( < h1> ...
ARNPageContainer:水平滚动分页 ViewController 容器
06-24
ARN页面容器 它的灵感来自以下产品。 用法 要运行示例项目， pod install克隆 repo，然后从 Example 目录运行pod install 。 要求 iOS 7.0+ 弧 安装 ARNPageContainer 可通过。 要安装它，只需将以下行添加到您的 Podfile 中： pod "ARNPageContainer" 依赖 执照 ARNPageContainer 在 MIT 许可下可用。 有关详细信息，请参阅许可证文件。
微信小程序打开视图容器page-container, 部分机型不会滚动回顶部
a532443304的博客
06-07 1372
微信小程序page-container部分机型不会滚动回顶部
智能小程序 Ray 开发实践——视图容器组件 PageContainer 和 CoverView 介绍
最新发布
IoT砖家
04-24 834
覆盖在原生组件之上的文本视图。
微信小程序wx:if并未完全隐藏消失，出现空白情况的解决办法
weixin_45004544的博客
03-27 752
解决办法：不使用wx:if条件语句，在容器（一般是）的class属性中使用三元运算，并在不显示的class属性中设定display: none;微信小程序在使用wx:if后，可以将不满足条件的数据、容器等隐藏起来，但容器并未完全消失，原有位置变成一片空白，无法写入新容器和数据。例：class =“xxx == xx?‘X’ : ‘x’”
微信小程序开发（八）：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：默
iron-page-scroll：组织部分页面并滚动到所选部分
02-06
通过使用`iron-page-scroll`，你可以轻松地创建一个动态的导航菜单，当用户点击某个链接时，页面会自动滚动到相应的章节，提供良好的用户体验。 首先，让我们了解一下`iron-page-scroll`的使用方法。在HTML文件中，...
page-scroll-to-id:使用jquery将动画页面滚动到文档中的特定ID
05-08
页面滚动到ID 页面滚动到ID是一个易于使用的jQuery插件，可将动画页面滚动到文档中的特定ID。 当与含有HREF价值环节的插件替换的“跳跃”的页面部分中的默认浏览器行为#被点击，通过顺畅动画的页面，这些部分（）。 ...
react-full-page-scroller:用于全页滚动的React模块
05-26
npm install --save react-full-page-scroller 演示版 用法 import React , { Component } from 'react' import MyComponent from 'react-full-page-scroller' import 'react-full-page-scroller/dist/index.css' ...
parallax-page-demo::page_facing_up::pager:演示视差
05-10
在"parallax-page-demo"这个项目中，我们看到的是一个用于展示视差效果的页面示例。这种效果常用于着陆页（landing page）设计，以吸引用户的注意力并引导他们更深入地浏览网站内容。 **视差滚动的工作原理** 视差...
微信小程序中使元素占满整个屏幕高度实现方法
01-03
微信小程序中使元素占满整个屏幕高度实现方法 在项目中经常要用到一个容器元素占满屏幕高度和宽度，然后再在这个容器元素里放置其他元素。 宽度很简单就是width:100% 但是高度呢，我们知道的是height:100%必须是在父元素的高度给定了的情况下才可以。 以前我的做法是用js获取屏幕的高度，然后将其赋值给height， 屏幕高度在网页中为:window.innerHeight; 在微信小程序中则需要调用wx.getSystemInfo接口，然后通过setData赋值 但是显然通过js来进行的，效率上肯定不如css直接给定样式。 于是我们使用另一种方法: 在网页中设置body,html{hei
微信小程序实现滑动翻页效果(完整代码)
12-30
微信小程序实现滑动翻页效果，效果图如下所示： 源码： <swiper-item cla
微信小程序共享元素+ page-container假页实现弹出效果
热门推荐
苏苏就是小苏苏的博客
05-06 1万+
1.实现效果 2.实现原理 page-container page-container 小程序如果在页面内进行复杂的界面设计（如在页面内弹出半屏的弹窗、在页面内加载一个全屏的子页面等），用户进行返回操作会直接离开当前页面，不符合用户预期，预期应为关闭当前弹出的组件。 为此提供“假页”容器组件，效果类似于 popup 弹出层，页面内存在该容器时，当用户进行返回操作，关闭该容器不关闭页面。返回操作包括三种情形，右滑手势、安卓物理返回键和调用 navigateBack 接口。 tip: 当前页面最多只有
微信小程序踩坑笔记
qq_25080529的博客
05-13 286
自用
微信小程序做全局登录弹窗
qq_45142260的博客
02-02 5675
微信小程序，全局控制全局登录弹窗。 需求：在任意需要弹出登录的页面，后台返回需要登录状态码，弹出登录弹窗进行登录，并刷新当前页面 过程：因为微信小程序无法封装一个全局组件通过方法全局调用。因此只能封装一个公共组件，在需要弹窗的页面注册并挂载，可以在app.json中全局注册（此处有问题后面会讲到），在需要弹窗的页面就无需注册，直接挂载即可。
小程序：页面滚动到某个位置导航条固定效果
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
07-17 543
我们设置了container的样式为。
微信小程序官方组件展示之视图容器page-container源码
软件事业部的博客
08-17 770
小程序如果在页面内进行复杂的界面设计（如在页面内弹出半屏的弹窗、在页面内加载一个全屏的子页面等），用户进行返回操作会直接离开当前页面，不符合用户预期，预期应为关闭当前弹出的组件。 为此提供“假页”容器组件，效果类似于 popup 弹出层，页面内存在该容器时，当用户进行返回操作，关闭该容器不关闭页面。返回操作包括三种情形，右滑手势、安卓物理返回键和调用 navigateBack 接口。...
组件page-container的使用 避免踩坑!!
每天都要努力学习哦~~
09-02 7742
page-container是微信小程序的一个视图容器，主要的功能就是实现一个弹窗的功能，该组件所包含的属性不多，比较关键的属性就是显示容器和容器位置的属性以及各种事件触发函数。如下show主要通过一些page-container外的事件触发后更改将show的值改为true，从而显示page-container组件。position属性控制着组件弹出的位置，但是属性的值bottom，top与right，center的显示效果不同。
微信开发者工具使用wx:if和wx:for实现九九乘法表
09-02
要使用wx:if和wx:for实现九九乘法表，可以按照以下步骤进行操作： 1. 首先，在微信开发者工具中创建一个新的小程序项目，并关联你自己的微信小程序的AppID。 2. 下载微信开发者工具，可以在官方网站上找到下载地址。 3. 登录微信公众平台，在开发管理的开发设置中找到你的AppID(小程序ID)。 4. 在微信开发者工具中打开你创建的小程序项目。 5. 在项目文件夹中找到pages文件夹，并在该文件夹下创建一个新的页面。 6. 在新页面的wxml文件中，使用wx:for循环和wx:if条件语句来实现九九乘法表的显示。 示例代码如下： ```html <view wx:for="{{table}}" wx:key="{{index}}"> <view wx:for="{{item}}" wx:key="{{index}}"> <view wx:if="{{item != 0}}"> {{index+1}} * {{item+1}} = {{(index+1)*(item+1)}} </view> </view> </view> ``` 7. 在对应的js文件中，定义一个二维数组table来存储九九乘法表的数据。 示例代码如下： ```javascript Page({ data: { table: [] }, onLoad: function () { var table = []; for (var i = 0; i < 9; i++) { var row = []; for (var j = 0; j < 9; j++) { row.push(j); } table.push(row); } this.setData({ table: table }); } }) ``` 8. 在微信开发者工具中预览和调试你的小程序，即可看到九九乘法表的结果。 通过以上步骤，你可以使用wx:if和wx:for在微信开发者工具中实现九九乘法表。请注意，示例代码中的数据和逻辑仅供参考，你可以根据自己的需求进行修改和优化。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [微信开发者工具出现警告：请注意游客模式下,调用 wx.operateWXData 是受限的, API 的返回是工具的模拟返回...](https://blog.csdn.net/weixin_44154837/article/details/128595787)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [微信开发者工具](https://blog.csdn.net/qq_52445443/article/details/122351865)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值