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

最新推荐文章于 2024-06-20 09:11:13 发布
最新推荐文章于 2024-06-20 09:11:13 发布
阅读量1.4w 收藏 23
点赞数 6
分类专栏： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ChibiMarukoChan/article/details/83749997
版权

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>

 

chibimarukochan
关注
  • 6
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
小程序---小程序样式底部固定和顶部固定
qq_41219586的博客
12-04 2720
1.小程序样式底部固定和顶部固定 可以在wxss中设置，也可以在 wxml的 要固定的部分 中设置style 底部固定： position:fixed; bottom:0; 顶部固定： .box_gobuy{ position:fixed; top:0; ...
微信小程序 居中、居右、居底和横向、纵向布局，文字在图片中间，网格布局
油焖茄子 的博客
07-28 9093
或者红色框加上：flex:1。//注意：这里的 height 写 100%会使得垂直居中可能会不生效。子类：display:inline/inline-block;需要知道控件的宽高，-100rpx为自身宽高（200）的一半。父类控件：position: relative;父类控件：position:relative;父类：text-align:center;水平居中B、相对父类控件–子控件绝对定位。子类控件：margin:0 auto;父类控件：display:flex;水平居中A：相对父类控件。
微信小程序 文字固定到顶部
最新发布
qq_61132537的博客
06-20 528
选择优惠卷 </view>
微信小程序scroll-view自动适应屏幕高度的使用方法
热门推荐
木豪末的博客
02-12 1万+
在写微信小程序时，经常会遇到页面需要上下滑动的需求，这个时候就需要用到scroll-view了，而使用scroll-view组件时必须设置它的高度，在页面顶部是一个导航栏，而底部的内容就需要滚动，这需要根据屏幕的高度来实时计算scroll-view的高度，我之前的处理方式是利用微信的WXML方法去实时获取顶部tab栏的高度，再实时计算出scroll-view的高度。这种方法既费时而且...
css高度自适应屏幕_一招搞定微信小程序ScrollView等组件高度自适应
weixin_39635130的博客
11-29 1013
你还在为 scroll-view 高度自适应问题而惆怅吗？你还在为 swiper 高度自适应而挠头吗？接下来，跟着我一招撸了他们！简介众所周知，scroll-view 和 swiper 是微信自带的两个非常常用的两个组件，当然也非常好用，但是好用的前提是你得先给他们设置固定的高度，我们来看看官网是怎么说的：如上图所示，官网明确提出了，scroll-view 是需要设置固定高度的。设置定高按照官网的...
【小程序】固定导航栏在顶部，跟随下滑
Z_hongli的博客
11-17 2795
【小程序】固定导航栏在顶部，跟随下滑一、效果演示二、实现原理三、相关代码1.说明（一定要看）1.wxml2.wxss3.js 一、效果演示 二、实现原理 在js中有一个函数是用来监听页面的滑动的，这个函数叫做onPageScroll，下面是我从官网上面查到的有关信息 我们可以利用这个函数的功能，获取页面在垂直方向已经滚动的距离，当滚动的距离达到一定数值时，我们通过js来改变样式，让原有的模块固定住不再移动 三、相关代码 1.说明（一定要看） 我把整个页面的代码全部拷过来了，wxml中最上面的部分是导航栏
微信小程序-页面配置-顶部导航栏背景色渐变
11-29
通过以上步骤，开发者可以实现微信小程序中顶部导航栏背景色的渐变，以及确保导航栏风格在整个应用中的一致性。同时，通过细致的页面配置和合理的代码组织，可以打造出美观且用户体验良好的微信小程序应用。
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
10-15
主要介绍了微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
159-微信小程序-新闻阅读器.zip
06-11
【微信小程序——构建新闻阅读器】 微信小程序作为腾讯推出的一种轻量级应用开发平台，以其无需下载安装、即扫即用的特点，深受开发者和用户的喜爱。本项目“159-微信小程序-新闻阅读器”旨在教授如何利用微信小程序...
微信小程序----position:sticky
12-20
但当用户滚动页面，使该元素到达设定的阈值（通常是相对于其父元素的顶部或底部）时，元素将立即变为`position:fixed`，固定在屏幕的指定位置，直到滚动返回到原始位置。 在微信小程序中，`position:sticky`的使用...
【微信小程序】view顶部固定或底部固定 + scroll-view中的元素view也可以使用position:fixed;固定选中元素位置...
weixin_33824363的博客
11-07 2912
1.顶端固定核心代码如下: <view class="page__hd" style="position:fixed; top:0;width: 750rpx;"> ......</view> 2.底端固定核心代码如下: <!-- 底部固定 --><view class="page__hd" style="position:fixe...
微信小程序--特定区域滚动到顶部时固定的方法
10-17
主要介绍了微信小程序--特定区域滚动到顶部时固定的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
微信小程序 - 固定头部 列表滚动header吸顶,滚动更新数据
iotjin的专栏
06-22 3637
demo 地址: https://github.com/iotjin/Jh_weapp 效果图： 吸顶主要是 position: sticky; .header { background: rgb(230, 230, 230); height: 25px; line-height: 25px; padding-left: 30rpx; font-size: 13px; align-items: center; position: sticky; top: 0; } .
小程序某标签滚动到某个位置时，固定在页面顶部
weixin_44558497的博客
02-29 3267
效果：我不知怎么上传视频效果。。。 方式一：用于要固定的元素前面的内容高度无法确定的情况下 js：代码 说明：这里选的指定元素不是导航栏本身，而是导航栏下面可滚动的内容，因为如果选择导航栏的话，它固定到顶部之后就无法恢复（因为它无法滑动，top值无法改变）。 //监听页面滚动 onPageScroll:function(e){ //获取指定元素距离页面顶部的距离 ...
小程序样式顶部固定和底部固定
qq_43227109的博客
06-18 5828
顶部固定 在需要的view里加上此样式 就不需要在wxss里调了 <view style="position:fixed;top:0;"> ...... </view> 底部固定 <view style="position:fixed;bottom:0;"> ...... </view> 效果 ...
小程序中元素滚动到元素的底部， 一直保持在底部
业余前端的职业经历
01-17 1574
如果是在web端的话 这个还是比较简单的，直接设置那个元素的 滚动他底部就可以了 但是小程序中 只有 页面滚动 pageScroll 但是这个时候 我们就搞不了吗 建议将长列表 改成 ScrollView滚动列表进行操作，然后通过设置这个列表的scrollTop 进行设置 我这里拿taro举例子。其实原生小程序和uniapp 差不多和这个一样 <ScrollView className='scrollview' scrollY scrollWithAni
小程序背景图固定以及标题栏遮挡内容滚动时显示内容
weixin_47077075的博客
04-07 1538
滚动页面时背景图固定： 采用一张图片作为背景图，通过设置position为fixed以及z-index为-1，目的是为了让它在最底层 <!-- 背景图 --> <view> <image class="bg-image" mode="scaleToFill" src="/img/bg2.png"></image> </view> .bg-image { width: 100%; height: 100%; posi
微信小程序的底部和顶部固定（购买和导航栏）
baidu_33616447的博客
01-04 4384
微信小程序的底部和顶部固定 在wxss样式里添加如下代码 顶部固定 代码片. position: fixed; top: 0rpx; 底部固定 代码片. position: fixed; bottom: 0rpx;
微信小程序之顶部固定和底部固定
weixin_34408624的博客
12-26 2590
  顶部固定 &lt;view style="position:fixed;top:0;"&gt; ...... &lt;/view&gt; 底部固定 &lt;view style="position:fixed;bottom:0;"&gt; ...... &lt;/view&gt;     转 : https://blog.csdn.net/junling_...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值