微信小程序——列表导航吸顶效果

众多类似商城项目中，都会有列表分类标签随着界面滚动吸顶的效果

APP中实现相关功能很容易，h5也可以动态 *** 作DOM来设置

微信小程序没有DOM，该怎么实现呢？

其实这个场景还是比较简单的，正常情况下导航标签是在列表中间的，滑到顶部时吸顶，再拉下来时又回到原来的位置

根据场景，有两个参考思路：

1、顶部定位一个常在的同样的导航标签，通过页面的 scrollOffset 来控制显隐即可

2、通过动态添加 fixed 样式，来动态改变标签在页面中的位置

ps：不过第二种思路会有一个缺陷就是切换位置时页面会因为少了一部分而上移，所以还是需要补白，所以还是用第一种思路

我这里是用了自定义导航栏的，所以实现上会有所不同，如果是用系统导航栏可以稍微调整一下，因为偏移量会有所区别

CSS部分

JS部分

其中 CacheUtilnaviStatuHeight 这个是我应用启动时获取的导航+状态栏高度，X和其他机型还是有所区别，如果是系统导航栏的话这些相关逻辑都可以省略

这里为什么用navigator而不用view呢？

因为navigator是原生组件，可以在最上层，因为有可能列表内容有原生组件的话滑动就会有问题，所以navigator在不设置url的情况下和view的效果差不多，故采用navigator

cover-view：bug: 自定义组件嵌套 cover-view 时，自定义组件的 slot 及其父节点暂不支持通过 wx:if 控制显隐，否则会导致 cover-view 不显示，而且使用的版本限制也很多，所以就不考虑

微信小程序底部隐藏导航栏是指在小程序中，可以设置底部导航栏不显示，从而达到隐藏的效果。这样可以让小程序的界面更加简洁，也可以让用户更加专注于当前页面的内容。要实现这个效果，需要在小程序的代码中添加一些代码，让底部导航栏不显示。例如，在appjson文件中，可以添加“window”字段，并将“showTabBar”字段设置为false，即可实现隐藏底部导航栏的效果。

以上就是关于微信小程序——列表导航吸顶效果全部的内容，包括:微信小程序——列表导航吸顶效果、微信小程序底部隐藏导航栏、等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！