【微信小程序】view顶部固定或底部固定

最新推荐文章于 2025-05-25 12:27:39 发布

weixin_33795093

最新推荐文章于 2025-05-25 12:27:39 发布

阅读量3.2w

点赞数 11

文章标签： javascript ViewUI

本文介绍了前端开发中实现元素在页面顶端和底端固定的两种核心代码实现方法，通过使用fixed定位和特定样式属性，使得元素能够始终保持在屏幕的顶部或底部。

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

1.顶端固定
核心代码如下:

2.底端固定
核心代码如下:

<view class="page__hd" style="position:fixed; bottom:0;width: 750rpx;">
......
</view>

转载：https://blog.youkuaiyun.com/qq_28988969/article/details/76673708

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_33795093

关注关注

11
点赞
踩
20

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

uniapp：开发微信小程序，position: fixed布局，苹果X底部适配方案

sunluyi的博客

07-10

471

uniapp开发微信小程序，position: fixed布局，苹果X底部适配方案。

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

m0_56860190的博客

07-06

8636

微信小程序固定顶部和底部，为iPhoneX留出底部自适应问题

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

实现上拉刷新下拉加载的布局

u014366956的专栏

09-09

667

package com.xfej.view; import java.util.Date; import android.content.Context; import android.util.AttributeSet; import android.util.Log; import android.view.LayoutInflater; import an

小程序使用web-view 修改顶部标题 && 安全认证文件部署在nginx

热门推荐

LLL_liuhui的博客

02-25

1万+

如图： 1、wxml <view class='wraper'> <view class='header'>header</view> <view class='main'> <scroll-view class='main-scroll' scroll-y style="height: 100%"> ...

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

10-15

微信小程序中的组件顶端固定或底端固定是小程序开发中常用的功能之一，它主要为了在用户滚动页面时，某些内容可以固定在屏幕的顶部或底部，从而提高用户操作的便捷性，增强用户体验。这种效果类似于网页开发中的...

微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码

10-17

总结来说，这个实例展示了如何结合微信小程序的 `scroll-view` 组件、动态计算和数据绑定，实现自动滚动到底部的功能。开发者可以根据实际需求调整代码，例如添加动画效果，或者在滚动到底部时触发加载更多数据的...

微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例

10-17

微信小程序是微信平台推出的一种无需下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。微信小程序丰富的使用场景和简洁的界面设计，使得它在移动应用市场中占据一席之地。...

微信小程序点击按钮或者自动定位到某一个位置

qq_45709232的博客

05-12

2540

微信小程序点击按钮或者自动定位到某一个位置

微信小程序 placeholder “悬浮“ 在固定view上层

hgp0487561的博客

08-01

3843

今天做小程序，在一个新增页面中，上面是一系列input，底部有个fixex的提交按钮，两个部分分别属于不同view，但是遇到了这样一个问题，当滚动input的部分时，发现input的placeholder悬浮在提交按钮上方。很显然这种情况不能接受，解决问题的方法就是将按钮view的z-index来控制层级，将其的z-index变大就可以了。 .bottom-view { position: fixed; bottom: 0; width: 100%; hei.

微信小程序入门解读-②

IT博客技术分享

02-20

352

一、总体样式 微信小程序允许在顶层放置一个app.wxss文件，里面采用 CSS 语法设置页面样式。这个文件的设置，对所有页面都有效。注意，小程序虽然使用 CSS 样式，但是样式文件的后缀名一律要写成.wxss。打开上一篇教程的示例，在项目顶层新建一个app.wxss文件，内容如下。 page { background-color: pink; } text { font-size: 24pt; color: blue; } 上面代码将整个页面的背景色设为粉红，然后将<t

微信小程序置顶和置底（适配手势条）

m0_51684823的博客

03-22

865

微信小程序置顶和置底（适配手势条）

微信小程序布局头尾固定中间包含横向和纵向滚动

08-02

4571

使用 fixed 定位实现效果 WXML  <view class="container"> <view class='head'>HEAD</view> <scroll-view class="body-h" scroll-x> <view id=&q

微信小程序scroll-view滚动到指定位置

11-19

1万+

自动滚动到指定位置在小程序开发过程中，为了满足一个特殊的要求，因此需要一个特殊的功能。即在打开小程序数据加载完成的时候，需要页面自动滚动到指定位置，或者页面的底部，在各种度度、狗狗之后，通过各种尝试，算是找到了一个比较完美的方案：微信扫描下面小程序体验（里面每天自动更新微软的精美壁纸）：就是下面这个组件scroll-view：主要使用里面一个属性: scroll-into-view： 1.wxml代码： <scroll-view style="width:100%;height:{{win

微信小程序上下固定，中间滚动，使用position:fixed遮挡正文

Wangyt_0028的博客

11-01

5699

问题：页面布局需要固定上下部分，使用position:fixed布局，发现会遮挡中间滚动部分。解决：给中间部分加padding-top和padding-bottom，高度分别为上下固定部分的高度。 ...

小程序实现置顶置底

weixin_46001736的博客

10-20

1200

【代码】小程序实现置顶置底。

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

qq_41219586的博客

12-04

2961

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

微信小程序实现顶部固定并不遮挡下面元素

11-04

微信小程序实现页面顶部固定并避免遮挡内容，通常需要利用`position: fixed`和`z-index`这两个CSS属性。具体步骤如下： 1. 给需要固定的元素设置`position: fixed`，使其相对于浏览器窗口定位，而不是文档流中的普通元素。例如，在`<view>`标签中添加： ```html <view class="top-fixed">  </view> ``` 2. 在对应的样式表`.top-fixed`类中定义： ```css .top-fixed { position: fixed; top: 0; /* 设置顶部距离 */ width: 100%; /* 或者自适应屏幕宽度 */ z-index: 999; /* 高于其他非fixed元素，保证显示在最上层 */ } ``` 3. 如果底部有需要正常滚动的内容，确保这部分内容不包含`position: relative`、`absolute`或`fixed`等影响布局的定位属性，以免与顶部固定元素冲突。 4. 使用`padding-top`来调整页面滚动区域，以便留出空间给顶部固定元素，例如： ```css body { padding-top: 64px; /* 这里假设顶部高度为64px，对应实际的顶部固定元素高度 */ overflow: auto; } ```