微信小程序固定头部不动

微信小程序固定头部不动,第1张

微信小程序固定头部不动的步骤如下:

1、在小程序自带的方法onPageScroll中可以得到滑动距离顶部的距离,氏桐在data公共数据中定义scrollTop。

2、得到滑动距离后,当页面滑动超出需要固定元素距离顶部的距离后使用css样式控制其定位,因此为要在scroll-view中定义class="title{{scrollTop>30'topnav':''}}"30就是我需要定义的模块距离顶部的距离,当超配核蚂过这个距离就会执行css的topnav样培埋式。

3、否则就执行愿有的css样式。

一、自定义导航栏组件

二、设置导航栏固定样式 :

此时,页面主体内容头部会有一部分被导航栏遮住在底下 ,这是因为position定位不占瀑布流空间,历塌为解决这个问题,可以给自定义导航栏加空一唤拦个高度等于导航栏的view,以此给导航栏在页面中占位,且高度等于导航栏高度

topHeight = wx.db.statusBarHeight 和烂胡+ wx.db.navBarHeight

完美解决!!!小程序仿原生自定义导航栏


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/12471395.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-25
下一篇 2023-05-25

发表评论

登录后才能评论

评论列表(0条)

保存