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

最新推荐文章于 2023-07-18 14:45:26 发布
原创 最新推荐文章于 2023-07-18 14:45:26 发布 · 6.2k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#小程序

在页面滚动到底部时，底部包含'加入购物车'和'立即购买'的容器会遮挡商品详情。通过在页面容器中添加padding-bottom，并设置为底部容器高度，可以避免遮挡，确保详情内容完整显示。

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

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

微信小程序 - 解决软键盘弹起遮挡输入框的问题，微信小程序input输入框被弹出的软键盘遮挡住一半或全部挡住了（键盘弹起时页面整体上移导致输入框被盖住挡住一部分，textarea同样可解决适用保搞定）
🏆 前端领域优质创作者
09-07 4053
微信小程序防止输入框被键盘遮住，微信小程序软键盘弹起遮挡输入框的问题，微信小程序输入框拉起软键盘时，输入框显示不全，被软键盘挡住一半，弹出键盘时遮挡输入框，小程序苹果ios输入框被键盘遮挡，小程序底部input输入框，键盘弹起时页面整体上移问题解决，iOS微信小程序键盘弹出时输入框被挡住，微信小程序textarea软键盘遮挡解决方案，微信小程序底部输入框，键盘弹起时页面整体上移问题，input在底部时，会被弹出的键盘遮住，微信小程序弹出键盘遮挡住输入框，UniApp微信小程序页面输入框被弹出的键盘遮挡住，弹
微信小程序：解决小程序底部input输入框，键盘弹起时页面整体上移问题解决，软键盘弹起时自定义顶部导航被顶出页面，软键盘弹出使页面布局上移导致内容顶到手机状态栏或页面错位变形问题（方案兼容安卓与苹果）
最新发布
高级前端工程师
09-07 3961
微信小程序键盘弹起后页面上推问题，小程序底部input输入框，键盘弹起时页面整体上移问题解决，解决小程序输入框，键盘弹起时页面整体上移问题，解决微信小程序自定义头部后，软键盘弹起时页面整体上移，微信小程序底部input输入框，键盘弹起时页面整体上移问题，微信小程序解决ios页面上推问题，小程序input输入框键盘弹出使得布局上移问题，输入框聚焦弹出键盘，微信小程序键盘弹起时,底部输入框抬起至键盘上方,顶部导航栏固定不动，页面整体上移过多导致内容遮挡或错位等，输入框聚焦弹出键盘，页面整体上移过多，微信小程序表
微信小程序使用echarts/数据刷新重新渲染/图层遮挡问题
weixin_45932157的博客
04-19 836
使用后，如果需要让图例随数据变化而变化或者重新渲染，可直接使用。在需要使用的wxml和wxss中写好容器的样式代码。最后在js文件中引用并编写图例代码及数据即可。下载好后，在使用页面的json文件中配置。2、图例重新渲染方法。
微信小程序中使用position:fixed遮挡正文内容解决
xiaosheng
10-09 9459
使用position:fixed的时候会遮挡正文内容，一开始一直在考虑在position:fixed所在的标签上做操作，结果最后发现直接给页面底部的标签加一个padding-bottom就可以解决这个问题，如果position:fixed是在顶部的话，就给顶部的标签设置pdding-top就好了...
微信小程序 底部按钮(position: fixed；)遮挡列表内容问题
@微你
03-25 4238
问题描述： 当页面数据接近或超过一页的时候，页面底部的固定按钮会遮挡一部分内容，导致内容显示不全，如下图：(列表的最后一个item的删除和更换按钮被底部固定的按钮遮住了) 解决方法： 在列表下边加一个盒子，给这个盒子一个高度，高度大于等于底部按钮的高度 <template> <view class="goodsList"> <view class='list'> <view class="recommend-item" v-for="(item,
粘性布局sticky下的fixed显示被遮挡问题
快乐分享
08-05 1951
避坑！粘性布局sticky下的fixed显示被遮挡
css 使用固定定位position: fixed；后遮住下方的元素（贴底之后不能被撑下去）
DSs1206的博客
12-08 4889
当你将一个元素贴底之后发现该元素不会被呢容撑下去 但是确实是贴了底 这样的话就会导致我们的内容被遮挡 最简答的方法就是给添加了fixed这个属性的元素外层添加一个div 其高度与fiexd元素等高就解决了 ...
微信小程序使用position: fixed; bottom: 0;后部分文字被遮挡
07-01
### 解决微信小程序中 `position: fixed; bottom: 0;` 导致文字被遮挡的问题 在微信小程序开发过程中，当使用 `position: fixed; bottom: 0;` 设置底部固定定位的元素时，可能会出现页面内容被该固定定位元素遮挡的...
【微信小程序】scroll-view与fixed不可混用
Minf的博客
02-08 1251
今天实现需求时，遇到一个bug： <scroll-view scroll-y="{{true}}"> <image src="xxx" style="position:fixed"/> <view wx:for="..." style="z-index:1"></view> </scroll-view> html结构如上。固定背景image，且实现上下滑动。 此时会发现有些区域无法上下滑动 解决方案： <scroll-view scro
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
10-15
总之，微信小程序实现组件顶端固定或底端固定效果在技术上实现起来并不复杂，关键在于理解CSS中的position: fixed;属性，并且在小程序开发的环境中灵活运用。通过以上提供的示例代码和讲解，开发者应该能够掌握在...
微信小程序按钮固定在底部时候，遮挡了页面内容的解决方法
qq_41862555的博客
10-09 7884
微信小程序按钮固定在底部遇到的BUG
小程序开发踩坑记录（四）——fixed元素在下拉刷新时会被遮挡且双端表现不一致问题（自制底部tabbar时会遇到的的bug）
王小烦的博客
04-18 7473
①问题描述 微信小程序提供了官方的底部导航栏-tabbar，但项目中为满足设计要求、实现更好的效果，需要自己模拟底部导航栏。而在制作过程中就发现了问题。 自制底部导航栏的基本思路为：将自制导航元素在index页面底部使用 { display：fixed } 定位，其中的各个导航图标控制index内多个 component 的 wx:if 从而实现模拟的页面跳转（实际是在一个页面内的显示隐藏）。 如...
微信小程序中position:fixed；bottom:0，在iphoneX中被遮住的问题
a15240780264的博客
10-19 2561
问题的描述： env() 和 constant() iOS11 新增特性，Webkit 的一个 CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量： safe-area-inset-left：安全区域距离左边边界距离 safe-area-inset-right：安全区域距离右边边界距离 safe-area-inset-top：安全区域距离顶部边界距离 safe-area-inset-bottom：安全区域距离底部边界距离 可以通过加内边距 padding 扩展高度： padding-bo
微信小程序底部按钮通过position:fixed定位后遮挡正文列表
guairena的博客
10-28 1067
使用`position:fixed; bottom: 0; `定位后遮挡正文内容，此时通过给底部按钮设置`margin-top`并不生效。需要给正文设置`padding-bottom`即可。
微信小程序container无法填满整个屏幕
weixin_43975276的博客
08-18 2316
wxml <view class="container"> <text>nihao</text> </view> wxss .container{ position: fixed; height: 100%; width: 100%; display:flex; flex-direction:column; align-items:center;/*垂直居中*/ justify-content: center;/*水平居中*/ }
uniapp开发微信小程序之position: fixed为什么失效
qq_44761755的博客
07-18 1459
uniapp开发微信小程序之position: fixed为什么失效
微信小程序 - position:fixed不起作用
CSU_Zipple的博客
03-10 1339
在微信小程序开发中，我设置了position:fixed一直不起作用。原本以为不支持这个特性，查看文档之后发现是可行的。 于是观察自己的代码（从H5修改来的），发现设置了bottom:50px，这是由于tabbar在h5中需要自己手动实现。但是在小程序中不需要这样的实现，所以bottom:0px就能够将组件定位于tabbar上面。 ...
微信小程序踩坑之scroll-view
weixin_44667590的博客
06-19 746
scroll-view与fixed同时使用的问题
微信小程序：简单粗暴！解决页面底部固定按钮遮挡页面内容情况
weixin_45668111的博客
10-09 5973
如图，当页面数据接近或超过一页的时候，页面底部的固定按钮会遮挡一部分内容，导致内容显示不全。（由于内容涉及隐私，码掉了一部分，看页面底部信息是否遮盖就好） 页面代码： <import is="" src="/pages/template/list-template.wxml" /> <view class='index_tab'> <!--获取页面内容的view--> </view> <view class="standView".
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值