微信小程序：各种Tab栏

2023-12-25 01:08| 来源: 网络整理| 查看: 265

时隔这么久，终于又开始写博客了:P。本文记录的是本人在做微信小程序的时候，自己实现的几种tab栏。排序从简单到复杂。我实现了以下几种：

最普通的Tab。点击变色并切换，无过渡。带滑动效果的Tab，配合swiper实现的。滑动条跟随滑动进度的Tab，是第二种的进阶版。但不推荐使用。一、最普通的Tab

效果图如下：普通tab 做这个效果并没有什么难点。通过js变量控制点击态，来确定是否需要active样式。下方的bar使用border-bottom实现就可以了。整个nav使用flex布局，调整justify-content为space-around。注意点：

如果tab栏非常多，可以使用scroll-view让它可以滑动。但是一般来说微信小程序一个页面最好不要放太多内容，所以这种需求应该不会很常见，一般2-4个tab完全不需要使用scroll-view。在写active类样式时我们会写被激活的tab项底部的bar，这个bar同样是有高度的，所以我们也需要给每个tab项设置border-bottom，只不过将颜色设置为transparent（透明）。这样的话就可以保证每个项点击前后的高度是相同的。

源代码： wxml:

【本文地址】

微信小程序：各种Tab栏

微信小程序：各种Tab栏

今日新闻

推荐新闻