微信小程序-顶部或底部固定，中间内容可以滚动

最新推荐文章于 2025-11-11 10:54:26 发布

原创最新推荐文章于 2025-11-11 10:54:26 发布 · 1.4w 阅读

23 ·

CC 4.0 BY-SA版权

微信小程序专栏收录该内容

55 篇文章

订阅专栏

本文介绍了一种实现网页顶部和底部元素固定的布局技巧，通过使用固定定位(position: fixed)，确保元素无论页面如何滚动都能保持在屏幕的顶部或底部。这种布局方式常见于导航栏和页脚的设计。

1.顶部固定

<view class="top" style="width:100%;height:80px;border-top:1px solid red;background-color:#f0f0f0;position:fixed;top:0;">
 顶部固定
</view>

2.底部固定

<view class="bottom" style="width:100%;height:80px;border-top:1px solid red;background-color:#f0f0f0;position:fixed; bottom:0;">
 底部固定
</view>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

chibimarukochan

关注关注

6
点赞
踩
23

收藏

觉得还不错? 一键收藏
3
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【小程序】固定导航栏在顶部，跟随下滑

Z_hongli的博客

11-17

3582

【小程序】固定导航栏在顶部，跟随下滑一、效果演示二、实现原理三、相关代码1.说明（一定要看）1.wxml2.wxss3.js 一、效果演示二、实现原理在js中有一个函数是用来监听页面的滑动的，这个函数叫做onPageScroll，下面是我从官网上面查到的有关信息我们可以利用这个函数的功能，获取页面在垂直方向已经滚动的距离，当滚动的距离达到一定数值时，我们通过js来改变样式，让原有的模块固定住不再移动三、相关代码 1.说明（一定要看）我把整个页面的代码全部拷过来了，wxml中最上面的部分是导航栏

微信小程序---导航吸顶+锚点.rar

04-11

微信小程序是一种轻量级的应用开发平台，主要针对移动端，提供了丰富的API和组件，使得...通过学习和实践，你可以更好地理解微信小程序的页面滚动、事件监听、组件自定义以及页面导航等核心概念，提升小程序开发技能。

3 条评论您还未登录，请先登录后发表或查看评论

微信小程序实现布局顶端固定也就是不随滚动而滚动

u014388322的专栏

08-07

2775

本人专注于Android/java/数据库/微信小程序技术领域的开发，以及有好几年的计算机毕业设计方面的实战开发经验和技术积累；尤其是在安卓（Android）的app的开发和微信小程序的开发，很是熟悉和了解；本人也是多年的Android开发人员；希望我发布的此篇文件可以帮助到您；🍅。

微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)

10-15

主要介绍了微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

微信小程序自定义表格组件：miniprogram-table-component 完全指南

最新发布

gitblog_01032的博客

11-11

574

`miniprogram-table-component` 是一个专为微信小程序设计的自定义表格组件，采用原生小程序开发规范。该项目使用 JavaScript 作为主要编程语言，配合 WXML 和 WXSS 进行视图层构建，确保在微信小程序环境中稳定运行。该项目提供了丰富的表格功能，包括基础表格展示、斑马纹样式、间隔边框、自定义表头样式、固定表头、横向滑动等，是小程序开发中数据展示的理想选择。

微信小程序--特定区域滚动到顶部时固定的方法

10-17

主要介绍了微信小程序--特定区域滚动到顶部时固定的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

微信小程序顶部导航栏

weixin_45659847的博客

12-17

940

wxml  <view class="navbar"> <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">{{item}}...

微信小程序实现头部底部固定中间列表滑动

breakmikebo的博客

06-29

1775

微信小程序头部底部固定中间列表滑动

微信小程序-页面配置-顶部导航栏背景色渐变

11-29

通过以上步骤，开发者可以实现微信小程序中顶部导航栏背景色的渐变，以及确保导航栏风格在整个应用中的一致性。同时，通过细致的页面配置和合理的代码组织，可以打造出美观且用户体验良好的微信小程序应用。

微信小程序----position:sticky

12-20

但当用户滚动页面，使该元素到达设定的阈值（通常是相对于其父元素的顶部或底部）时，元素将立即变为`position:fixed`，固定在屏幕的指定位置，直到滚动返回到原始位置。在微信小程序中，`position:sticky`的使用...

微信小程序 文字固定到顶部

本人小可爱

06-20

846

选择优惠卷 </view>

微信小程序商品界面实现，顶部固定，解决顶部内容重叠问题，动态加载顶部标签栏

xq_886的博客

05-11

3123

微信小程序商品界面实现，顶部固定，防止重叠，动态加载顶部标签，动态加载底部提示框

微信小程序添加页面顶部固定标题栏navigationBar，以及部分页隐藏

Ronion123的博客

01-15

3620

2.当某个页不需要头部样式，需要覆盖全屏只留下返回胶囊时，可以在指定page页下的json文件内添加"navigationStyle": "custom"3.当不使用官方的标题栏时，你也可以设计自己的头部栏，下面是我自己的，效果为logo图靠左居中(靠左是考虑到部分手机的灵动岛遮挡)，大家可以自己更改细节。1.在各个页添加头部固定样式，可以在app.json内设置。navigationBarTitleText：标题名称。navigationStyle：导航栏样式。

小程序---小程序样式底部固定和顶部固定

qq_41219586的博客

12-04

3052

1.小程序样式底部固定和顶部固定可以在wxss中设置，也可以在 wxml的要固定的部分中设置style 底部固定： position:fixed; bottom:0; 顶部固定： .box_gobuy{ position:fixed; top:0; ...

微信小程序实现上下置顶中间滚动的效果

weixin_45315800的博客

08-18

1661

我们在写页面时，可能经常会碰到这样的页面结构，头部和尾部固定，中间自由滚动的效果，或者固定头部，剩余的部分根据内容来自由滚动。刚刚毕业做项目，总是因为这个耽误不少时间，希望跟我一样的小伙伴，看完我写的这之后，能够让你更快的码代码哦。那就来先说说小程序吧！小程序实现 <view style="`display: flex;flex-direction: column;justify-content:space-between;height:100%`"> <view style

微信小程序实现头部、底部固定，中间滚动的布局