【微信小程序】解决 设置position:fixed后遮挡内容、内容显示不全

最新推荐文章于 2023-12-08 18:05:00 发布
最新推荐文章于 2023-12-08 18:05:00 发布
阅读量5.7k 收藏 4
点赞数 1
分类专栏： 微信小程序 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangshuny/article/details/113006397
版权

问题描述：
商品详情页面底部有一个包含有"加入购物车"和“立即购买”的容器，当页面滚动到底部的时候，发现遮挡详情内容
在这里插入图片描述

解决方法
因为是页面滚动，我在页面的容器中添加padding-bottom，值设置为底部容器的高度就可以将遮挡的内容显示出来
在这里插入图片描述

川川~
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序----导航栏透明渐变一
12-20
在微信小程序开发中，创建富有视觉效果的用户界面是提升用户体验的关键之一。今天我们将探讨一个特定的设计技巧，即“微信小程序中的导航栏透明渐变效果”。这个效果可以通过CSS3的`opacity`属性来实现，让导航栏在...
微信小程序吸底区域适配iPhoneX的实现
10-15
总的来说，微信小程序在适配iPhone X的底部区域时，需要考虑Home Indicator的影响，通过获取设备信息判断是否为iPhone X，并结合CSS样式调整，确保内容不会被遮挡。旧方法依赖于设备型号检测和硬编码的像素值，而新...
微信小程序中使用position:fixed遮挡正文内容解决
xiaosheng
10-09 9244
使用position:fixed的时候会遮挡正文内容，一开始一直在考虑在position:fixed所在的标签上做操作，结果最后发现直接给页面底部的标签加一个padding-bottom就可以解决这个问题，如果position:fixed是在顶部的话，就给顶部的标签设置pdding-top就好了...
微信小程序页面遮挡解决
weixin_51295863的博客
03-05 971
很难受，于是修改聊天框所在view的margin-bottom，没什么用，因为页面高度不能写固定的，所以想来想去，找到一个好办法，在聊天容器下面加个小容器，设置高度就行。这段时间在做一个人工智能聊天客服，突然发现当聊天的语言变多的时候，发生最下面的聊天记录会被固定在下方的input输入框挡到，像下面这样子。后面再写一篇关于input随键盘弹起改变高度的，不然被手机键盘挡到。
自定义全局组件：解决微信小程序元素被头部栏遮挡的问题
weixin_44582077的博客
01-26 5470
前言：用于解决微信小程序元素内容被顶部栏遮挡的问题，在不同型号手机分别撑起一定高度与头部自定义导航栏一致的盒子 1、封装一个组件（如：uni-header-box.vue） <template> //1、封装一个组件 <view :style="style" /> </template> <script> export default { data() { return { /* 设定状态栏默认高度 */ statusBarH
记录--优雅解决uniapp微信小程序右上角胶囊菜单覆盖问题
林恒的博客
12-08 1294
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 前言 大家好，今天聊一下在做uniapp多端适配项目，需要用到自定义导航时，如何解决状态栏塌陷及导航栏安全区域多端适配问题，下文只针对H5、APP、微信小程序三端进行适配，通过封装一个通用高阶组件包裹自定义导航栏内容，主要是通过设置padding来使内容始终保持在安全区域，达到低耦合，可复用性强的效果。 一、创建NavbarWr...
关于Position:fixed固定定位后遇到问题解决方法
A_9888的博客
05-23 7124
关于Position:fixed固定定位后遇到的问题: 首先要理解 fixed 固定定位以后会使其脱离文档流，脱离文档流以后就会漂浮在页面上不会占据空间，导致以后的元素内容会上移，会被脱离文档流的元素遮挡。 解决方法 一般一个网页header部分会遇到这种问题。 1.这里可以给header部分设置高，然后给header一下的元素给margin-top，可以实现两个分开。另外注意position:fixed，一定要设置top：0； left：0:； 不然会引起margin-top无效。 ...
微信小程序 底部按钮(position: fixed；)遮挡列表内容问题
@微你
03-25 3545
问题描述： 当页面数据接近或超过一页的时候，页面底部的固定按钮会遮挡一部分内容，导致内容显示不全，如下图：(列表的最后一个item的删除和更换按钮被底部固定的按钮遮住了) 解决方法： 在列表下边加一个盒子，给这个盒子一个高度，高度大于等于底部按钮的高度 <template> <view class="goodsList"> <view class='list'> <view class="recommend-item" v-for="(item,
操作按钮悬浮固定在微信小程序底部的实现代码
12-11
本章节主要介绍了如何将操作按钮悬浮固定在微信小程序底部?操作起来也比较简单，还不会的朋友一起跟着小编学习一下吧，希望对你们有所帮助。 　常见的有加入购物车按钮、结算按钮、收货列表添加地址按钮。 　以收货...
微信小程序小技巧系列《十五》操作按钮悬浮固定在底部，实现html格式内容
03-29
一：微信小程序操作按钮悬浮固定在底部 作者：秀杰，来自授权地址 常见的有加入购物车按钮、结算按钮、收货列表添加地址按钮。 以收货地址为例，将添加地址按钮悬浮于最底部，这样再多的地址，也不会被遮挡而看不见...
微信小程序 CSS filter（滤镜）的使用示例详解
12-11
之前在看七月老师的视频的时候，看到了有一个样式是 -webkit-filter ，不知道是什么（我没咋学过CSS，嘿嘿，所以不知道是啥），于是查了一下，原来是滤镜吖。但是在微信小程序里使用的时候，下面一直飘红线，再仔细查了一下，原来是在 Chrome, Safari 中使用 -webkit-filter ，还有 -moz-filter （适配Firefox）， -o-filter （适配Opera）， -ms-filter （适配ie）而微信小程序里使用的话，使用 filter 就可以了。一时间好奇了下，就多试了几个函数，以下是详细的笔记 定义 filter 属性定义了元素(通常是)的可视效果
微信小程序开发 遮罩层弹出框
04-03
在微信小程序开发中，创建一个遮罩层弹出框是常见的需求，这通常用于实现对话框、加载提示或用户交互反馈等场景。本教程将详细讲解如何在微信小程序中实现这样一个功能。 首先，我们需要理解微信小程序的基本架构。...
微信小程序固定顶部的两个问题
纠缠AI的亮子
04-28 3190
使用下面的方法，固定顶部区域（通常是导航菜单）： position: fixed; 带来两个问题： 下拉更新时，固定区域不动，会遮挡住三个点。用户只有尽力下拉，才能看到三个点。 滚动条刺穿固定区域。 ...
UNIAPP----让微信小程序内容不被胶囊遮挡，app自带状态栏，禁止沉浸式显示
weixin_44126737的博客
08-21 6691
最近写的项目，UI给的图，内容距离顶部有预留的状态栏高度，然后使用view做导航栏发现微信小程序被胶囊遮挡，app滑动有沉浸式显示，影响客户体验。 解决方法： uniapp项目中，在pages.json文件里，globalStyle，注释掉"navigationStyle": "custom" 目的是：不隐藏原生状态栏，这样小程序内容就放在了胶囊下面 微信小程序这边解决了，然后看app 由于uniapp自动开启沉浸式状态栏，就是状态栏透明或者说跟随软件导航栏颜色动态改变自身颜色。有时候..
微信小程序使用echarts/数据刷新重新渲染/图层遮挡问题
weixin_45932157的博客
04-19 683
使用后，如果需要让图例随数据变化而变化或者重新渲染，可直接使用。在需要使用的wxml和wxss中写好容器的样式代码。最后在js文件中引用并编写图例代码及数据即可。下载好后，在使用页面的json文件中配置。2、图例重新渲染方法。
【小程序】文本框聚焦时，弹出的键盘遮挡住文本框如何处理
九日的博客
12-07 1216
现在需要实现一个功能，当在微信小程序点击聚焦输入框时，页面自动滚动，使输入框显示在弹出的键盘上方，避免被键盘遮挡。iso的微信小程序自带这个优化，不需要额外处理。安卓或其他系统的微信小程序需要这个处理。
小程序页面设置100%高度还是留白怎么办？
zhangxueyou2223的博客
06-12 2537
小程序页面设置100%高度还是留白怎么办？像小程序，app开发的时候经常会遇到设置高度，页面颜色的问题，经常出现留白没占满现象，今天专门整了一篇文章，解决这个问题。
解决头部使用 position:fixed； 固定定位后遮住下方内容的问题
热门推荐
最爱喝怡宝的博客
12-30 1万+
今天在做一个页面的时候，有一个效果是要让头部固定，但是在给了position:fixed; 后，继续往下写会发现下方内容有部分被头部遮住了，有两个办法可以解决这种问题 1.在头部下面给一个空的 div 给这个div设置高度，把页面撑开，这种方法是让头部刚好遮住的是这个空div，把内容放出来。 但是这种方法需要一点点调试高度，所以不推荐。 2.把整个要使用 position:fixed; 的盒子，用另一个盒子包起来 比如说我有一个头部区域，需要固定 <div class="head"&g
position:sticky-粘性吸附布局
qq_15509267的博客
05-22 855
position:sticky-粘性吸附布局，就是在一个容器里,将一个子元素设置为在元素显示在,显示的效果与一致，当元素被滑动出是,显示效果与一致。
position:fixed 固定顶部
最新发布
04-22
position:fixed是CSS中的一个定位属性，用于将元素固定在页面的某个位置，不随页面滚动而改变位置。当设置position:fixed时，元素的位置会相对于浏览器窗口进行定位。 固定顶部是指将元素固定在页面的顶部位置，无论用户如何滚动页面，该元素都会保持在页面顶部不动。 要实现固定顶部效果，可以通过以下步骤： 1. 首先，给需要固定的元素添加一个CSS样式，设置position为fixed。 2. 设置top属性为0，表示将元素固定在页面的顶部位置。 3. 可以通过设置left、right和width属性来控制元素的水平位置和宽度。 下面是一个示例代码： ``` <style> .fixed-top { position: fixed; top: 0; left: 0; width: 100%; background-color: #f5f5f5; padding: 10px; } </style> <div class="fixed-top"> 这是一个固定在顶部的元素 </div> ``` 这样设置后，该元素就会固定在页面的顶部位置，并且不会随页面滚动而改变位置。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值