微信小程序固定顶部和底部

最新推荐文章于 2025-06-11 13:11:18 发布
原创 最新推荐文章于 2025-06-11 13:11:18 发布 · 8.6k 阅读 · 30 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#微信小程序 #css

本文介绍了微信小程序中如何实现顶部和底部的固定，并针对iPhoneX及以上机型的底部安全距离进行适配，确保内容显示完整。

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

固定顶部
.top{
   
   
	position:fixed;
	top:0;
	width: 100%;
}
固定底部
.bottom{
   
   
	position:fixed;
	bottom:0;
	width: 100%;
}
为 iPhoneX 留出底部安全距离

如果使用的是iPhone6/7/8 Plus或者以下机型，固定底部加上上面的样式显示是正常的
iPhone6X机型
但如果使用的是iPhoneX及以上的机型，就会发现被底部的白色横条挡住

最低0.47元/天 解锁文章

200万优质内容无限畅学
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
10-15
主要介绍了微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
微信小程序实现顶部、底部滑动联动
03-29
这个场景一般用于展示数据时，数据过多，每条一行显示不下，表头可以横向滑动，下面要显示的数据部分横向纵向都可以滑动。表头或下面数据部分横向滑动的时候，两部分可以进行联动 具体效果像这样（随便写的丑样式...
【微信小程序】view顶部固定或底部固定
热门推荐
weixin_33795093的博客
11-07 3万+
1.顶端固定核心代码如下: <view class="page__hd" style="position:fixed; top:0;width: 750rpx;"> ......</view>     2.底端固定核心代码如下: <!-- 底部固定 --><view class="page__hd" style="position:fi
微信小程序导航栏终极对决：顶部VS底部！看完秒懂怎么选
最新发布
weixin_45917851的博客
06-11 1006
启用自定义模式在app.json中设置："window": {获取关键尺寸（状态栏高度+胶囊位置）在app.js中计算：App({// 导航栏高度 = 状态栏高度 + 胶囊高度 + 上下间距*2},})创建自定义组件（如组件WXML：<!" > <!-- 左侧返回按钮 --> < view class = " back-btn " bindtap = " handleBack " > ⬅ </ view > <!
微信小程序布局固定底部且不随页面滑动(帖子评论)
u014388322的专栏
09-11 2190
本人专注于Android/java/数据库/微信小程序技术领域的开发，以及有好几年的计算机毕业设计方面的实战开发经验和技术积累；尤其是在安卓（Android）的app的开发和微信小程序的开发，很是熟悉和了解；本人也是多年的Android开发人员；希望我发布的此篇文件可以帮助到您；🍅。
微信小程序实现头部底部固定中间列表滑动
breakmikebo的博客
06-29 1672
微信小程序头部底部固定中间列表滑动
微信小程序自定义底部菜单设计，固定在底部，并非使用tabBar设计
qq_41977843的博客
04-23 2398
微信小程序，自定义底部菜单设计，固定在底部，并非使用tabBar设计
微信小程序 文字固定到顶部
本人小可爱
06-20 810
选择优惠卷 </view>
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
10-17
### 微信小程序顶部TabBar的功能实现 顶部TabBar的核心功能是页面切换，这通常会结合`swiper`组件来实现。`swiper`组件允许开发者创建滑动的轮播视图，通过定义多个`swiper-item`来承载各个页面的内容。`swiper`的`...
小程序---小程序样式底部固定和顶部固定
qq_41219586的博客
12-04 2953
1.小程序样式底部固定和顶部固定 可以在wxss中设置，也可以在 wxml的 要固定的部分 中设置style 底部固定： position:fixed; bottom:0; 顶部固定： .box_gobuy{ position:fixed; top:0; ...
微信小程序实现布局顶端固定也就是不随滚动而滚动
u014388322的专栏
08-07 2660
本人专注于Android/java/数据库/微信小程序技术领域的开发，以及有好几年的计算机毕业设计方面的实战开发经验和技术积累；尤其是在安卓（Android）的app的开发和微信小程序的开发，很是熟悉和了解；本人也是多年的Android开发人员；希望我发布的此篇文件可以帮助到您；🍅。
微信小程序--特定区域滚动到顶部时固定的方法
10-17
主要介绍了微信小程序--特定区域滚动到顶部时固定的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
微信小程序-滚动到头部固定在顶部
少爷、的博客
06-20 3769
在做小程序的时候向上滑动页面，让某一组件固定在顶部，如图： 别人写的解决方法： 通过页面onPageScroll方法解决 方法我试了，可以用。但是他适用于原本不在顶部的组件滚动到顶部，实现在顶部固定。但是原本就在顶部的，就会出现卡顿情况。 解决办法： <view class="box" style="position:fixed;width:100%; top:0; z-index:999" > 然后在下面的组件CSS属性里面加一个margin-top: 100rpx;1000rpx是这个
微信小程序 如何将内容固定在页面最上方，不随下拉而移动。
weixin_43795761的博客
11-24 3099
使用position:fixed将video固定在屏幕的最上方，且top:0，已知video组件的默认高度为225px, 所以让下层的内容从225px开始， 最后使用index:1。让video组件在最上层。
微信小程序操作按钮悬浮固定在底部
weixin_33881041的博客
01-07 744
2019独角兽企业重金招聘Python工程师标准>>> ...
【微信小程序】view顶部固定或底部固定 + scroll-view中的元素view也可以使用position:fixed;固定选中元素位置...
weixin_33824363的博客
11-07 3014
1.顶端固定核心代码如下: <view class="page__hd" style="position:fixed; top:0;width: 750rpx;"> ......</view> 2.底端固定核心代码如下: <!-- 底部固定 --><view class="page__hd" style="position:fixe...
微信小程序-顶部或底部固定，中间内容可以滚动
ChibiMarukoChan的博客
11-05 1万+
1.顶部固定 &lt;view class="top" style="width:100%;height:80px;border-top:1px solid red;background-color:#f0f0f0;position:fixed;top:0;"&gt; 顶部固定 &lt;/view&gt; 2.底部固定 &lt;view class="bottom" style="wi.
微信小程序 底部固定
央顺科技官方博客
11-07 3028
微信小程序 底部固定 position: fixed;
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值