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

最新推荐文章于 2024-03-21 12:37:20 发布
最新推荐文章于 2024-03-21 12:37:20 发布
阅读量5.8k 收藏 8
点赞数 3
分类专栏： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43227109/article/details/92765598
版权

顶部固定 

在需要的view里加上此样式 就不需要在wxss里调了

<view style="position:fixed;top:0;">

......

</view>

底部固定

<view style="position:fixed;bottom:0;">

......

</view>

效果

阿圆啊哈
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序 iPhoneX底部安全区域（底部小黑条）适配(一分钟解决)
10-16
iPhone X 对于微信小程序的tabbar来说，会被底部小黑条覆盖，需要处理，大概思路是，得到手机型号、分别判断样式。这篇文章主要介绍了微信小程序 iPhoneX底部安全区域（底部小黑条）适配问题,需要的朋友可以参考下
小程序自定义底部导航 custom-tab-bar完整实现代码附效果图
a_靖的博客
11-15 5000
根据用户身份动态设置底部的导航图标完整示例代码附效果图，小程序自定义底部导航 custom-tab-bar完整实现代码附效果图
微信小程序自定义底部弹框
晓风残叶
10-09 3566
该弹框自底部向上滑动弹出，同时蒙板添加透明的动画，点击蒙版，弹框下滑，蒙板渐变消失 wxml  &lt;view class="modals"&gt; &lt;view class="mask" bindtap="hideModal" animation="{{animationMask}}"&gt;&lt;/view&gt; &lt;view cla
微信小程序自定义tabbar中间凸起
woshiabc111的博客
04-20 720
1.项目根目录创建custom-tab-bar文件夹。6.app.json内tabbar属性加一个。2.index.js文件定义组件内容。7.tabbar页面内的onLoad。3.index.json定义组件。4.index.wxml页面内容。5.index.wxss页面样式。
微信小程序自定义tabBar(边框圆角)
weixin_43791884的博客
08-22 4657
微信小程序自定义tabBar边框圆角左上右上
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
10-15
主要介绍了微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
微信小程序实现顶部、底部滑动联动
03-29
具体效果像这样（随便写的丑样式布局） (此图片来源于网络，如有侵权，请联系删除! ) 说说原理，主要是使用两个scroll-view组件，然后监听两个scroll-view的滑动事件，然后根据滑动的scroll-view横向滑动的距离，...
微信小程序 tab 顶部选项卡下载
12-01
在微信小程序中，Tab 顶部选项卡（Tab Bar）是常见的一种导航设计，它通常位于小程序页面的底部，用于展示多个主要功能模块，用户可以通过点击不同的选项卡在各模块间切换。Tab Bar 的设计规范和实现方法对于创建...
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
01-19
微信小程序和 h5 网页需要针对这种情况进行适配，否则可能会遇到底部按钮或选项卡栏与底部黑线重叠的情况，如下图。 1. 安全区域是什么意思？ 想要解决内容与小黑线重叠的问题，我们需要先了解清楚苹果对于安全区域...
微信小程序实现topBar底部选择栏效果
10-18
在这个实例中，我们将深入探讨如何在微信小程序中实现一个顶部导航栏（topBar）和底部选择栏的效果。 首先，`topBar` 是微信小程序中的一种界面元素，通常位于屏幕顶部，用于显示应用的标题、返回按钮和其他功能。...
uniapp微信小程序使用 uview-plus 底部自定义导航栏
最新发布
shp123a的博客
03-21 450
文件.(文件命名-微信小程序自定义推荐)使用pinia存储数据,vue3，js。在store里配的activeTab。在pages.json文件里配置。创建同pages同级的。
微信小程序之 动画 —— 自定义底部弹出层
weixin_34380948的博客
11-27 632
wxml： <view class='buy' bindtap='showBuyModal'>立即购买</view> <!-- 点击立即购买 弹出购买遮罩层 --> <view class="cover_screen" bindtap="hideBuyModal" wx:if="{{showModalStatus}}"></view> ...
uniapp下页面布局分析二——固定部分元素到底部
热门推荐
lsjweiyi的博客
04-15 1万+
接上篇内容。继续添加内容。 在底部添加一个固定的栏目 <template> <view style="flex: auto; background-color: red"> <view style="bottom: 0">我固定在底部</view> </view> </template> 我试着向上面这样添加一个底部工具栏，但是发现不行bottom: 0无法生效。 于是我想到用position: abs
小程序按钮悬浮固定在底部
前端视听
04-23 6813
其实这是一个很简单的小程序的样式，也就随手记录下来了。 <button class='Scancode' bindtap='getScancode'>绑定车辆</button> wxss: .Scancode { font-size: 39rpx; background: #fff; position: fixed; bo...
小程序---小程序样式底部固定和顶部固定
qq_41219586的博客
12-04 2701
1.小程序样式底部固定和顶部固定 可以在wxss中设置，也可以在 wxml的 要固定的部分 中设置style 底部固定： position:fixed; bottom:0; 顶部固定： .box_gobuy{ position:fixed; top:0; ...
微信小程序固定顶部的两个问题
纠缠AI的亮子
04-28 3189
使用下面的方法，固定顶部区域（通常是导航菜单）： position: fixed; 带来两个问题： 下拉更新时，固定区域不动，会遮挡住三个点。用户只有尽力下拉，才能看到三个点。 滚动条刺穿固定区域。 ...
微信小程序个人中心样式
05-17
微信小程序个人中心的样式可以根据个人需求进行设计，以下是一些常见的设计元素： 1. 头像和昵称：在个人中心页面的顶部通常会显示用户头像和昵称。 2. 菜单列表：可以包含用户个人信息、设置、订单等选项，点击后...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值