给小程序导航栏设置固定

最新推荐文章于 2024-03-05 19:29:42 发布
最新推荐文章于 2024-03-05 19:29:42 发布
阅读量1.9k 收藏 6
点赞数 1
文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Wei0217/article/details/128462318
版权

为了固定顶部导航栏(小程序)，1，给导航栏设置高，2，将除了导航栏的地方用，组件  <scroll-view scroll-y  class="swiper-container"></scroll-view>包起来，<scroll-view>是可滚动视图区域。用于区域滚动。就是相当于把导航栏单独拿出来，剩下的区域可滑动，就是相当于给导航栏设置了固定

 

1.f8b6f2fece5d4ea39885bca519e77ead.png

2， 5228f82d5ac142c5b2894ea416103ccf.png

3，88cc8bdd1cb5420183256898366c7258.png 

 

Wei0217
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序使用onPageScroll实现当搜索栏到达顶部时,固定检索栏
qq_39142965的博客
09-26 8157
主要实现方式为: 先创建id 为location_id的view,然后使用onPageScroll监听该view的位置,当其位置小于0时,设置hideTop =true wxml: <view id='location_id' style=" padding: 0 40rpx; border:1rpx solid #DCDCDC;"></view> <vie...
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
10-15
主要介绍了微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
微信小程序搜索框吸顶效果实现
竹毛言己
05-15 1964
主页要做一个搜索框，滑动主页页面的时候，搜索框始终位于导航栏下面，位置不变，不随页面的滑动而滑动，这种效果被称为”吸顶“效果。点击搜索框，弹出上层搜索详情的视图层，搜索详情的整个页面覆盖在主页面之上，并且也覆盖住主要搜索框。需要在搜搜详情这个页面上也添加。
微信小程序如何实现自定义导航栏、导航栏手机适配（获取导航栏、状态栏高度和胶囊位置）以及踩过的坑
最新发布
weixin_57177381的博客
03-05 1287
微信小程序如何实现自定义导航栏以及踩过的坑，获取胶囊位置计算导航栏位置，让图标始终保持靠着胶囊左边
微信小程序 导航栏固定
xiaolenglala的专栏
03-25 4144
顶部固定 .nav{ /* fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位 */ position: fixed; top: 0rpx; z-index: 1; width: 100%; height: 70rpx; line-height: 70rpx; } z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较...
微信小程序自定义搜索框
weixin_48604432的博客
11-08 970
小程序自定义搜索框固定在头部。 代码示例： <view class="inputtop"> <input type="text" placeholder="输入内容进行检索" class='input' placeholder-class="placeholder" bindblur="onBindFocus" value="{{searchCode}}" ></input> <icon class='icon' type="clear" size="18
微信小程序——顶部分页导航栏
12-29
微信小程序顶部分页导航栏，可以实现页面左右切换，自动设置宽度等
微信小程序顶部导航栏
weixin_45659847的博客
12-17 799
wxml <!--导航条--> <view class="navbar"> <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">{{item}}...
小程序 页面移动到指定位置将导航栏固定(uniapp)
JunVei的博客
09-23 3105
页面移动到指定位置，将导航栏固定
微信小程序实现布局顶端固定也就是不随滚动而滚动
u014388322的专栏
08-07 2078
本人专注于Android/java/数据库/微信小程序技术领域的开发，以及有好几年的计算机毕业设计方面的实战开发经验和技术积累；尤其是在安卓（Android）的app的开发和微信小程序的开发，很是熟悉和了解；本人也是多年的Android开发人员；希望我发布的此篇文件可以帮助到您；🍅。
微信小程序自定义navigationBar顶部导航栏适配所有机型（附完整案例）
10-15
主要介绍了微信小程序自定义navigationBar顶部导航栏适配所有机型（附完整案例），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
微信小程序教程系列之设置标题栏和导航栏（7）
08-30
主要为大家详细介绍了微信小程序教程系列之标题栏和导航栏的设置，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
导航栏滚动到顶部后固定
07-16
导航栏滚动到页面顶部后，固定，并处于所有的页面元素上方，浮动显示。
微信小程序仿android fragment可滑动的底部导航栏
03-29
底部3-5个选项的底部导航栏，目前在移动端上是主流布局之一因此腾讯官方特地做了，可以通过设置，就可以做出了一个底部的导航栏但是通过设置的这个底部的导航栏，功能上比较固定 ...       底部3-5个选项的底部...
微信小程序实现侧边栏分类
12-30
本文实例为大家分享了微信小程序侧边栏分类展示的具体代码，供大家参考，具体内容如下 效果图 实现思路 把屏幕当成一个固定的盒子，然后把盒子分成两边，并让盒子的每一边都能够滚动。 源码 index.wxml <!--主...
小程序实现自定义顶部导航栏搜索框
ddd
09-05 2617
Navigation是小程序的顶部导航组件，当页面配置navigationStyle设置为custom的时候可以使用此组件替代原生导航栏。自定义顶部导航栏 搜索框
微信小程序页面-筛选栏固定定位，以及使用Vant中TreeSelect控件遇到的问题
slient033的博客
11-05 4495
微信小程序页面-筛选栏固定定位，以及使用Vant中TreeSelect控件遇到的问题
uniapp 微信小程序 搜索框滚动固定
weixin_44705979的博客
01-12 1714
uniapp 微信小程序 搜索框滚动固定
微信小程序导航栏居中跟随tab滚动
09-07
微信小程序导航栏居中跟随tab滚动的实现可以通过以下步骤来进行： 1. 创建一个包含导航栏和tab的父容器，并设置其为flex布局，让子元素水平居中对齐。 2. 设置导航栏和tab的样式，可以使用flex布局或者其他方式，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值