微信小程序实现顶部普通选项卡效果(非swiper)

微信小程序顶部普通选项卡效果实现详解

在前不久，我编写了一个抢红包小程序，其中涉及到了顶部选项卡的设置。今天，我来为大家详细介绍一下如何实现微信小程序的顶部普通选项卡效果，而不是使用swiper。希望通过本文，感兴趣的小伙伴们能够了解到实现这一功能的具体方法。

接下来，直接上代码：

WXML部分：

{{item}}

WXSS部分：

.navbar {

display: flex;

width: 100%;

flex-direction: row;

line-height: 80rpx;

position: fixed;

top: 0; / 这里添加了top属性，使导航栏固定在顶部 /

}

.navbar .item {

flex: auto;

font-size: 30rpx;

text-align: center;

background: fff;

font-weight: bold;

}

.navbar .item.active {

color: 36DB2C;

position: relative;

}

.navbar .item.active::after {

content: "";

display: block;

position: absolute;

height: 4rpx;

bottom: 0;

left: 0;

right: 0;

background: 36DB2C; / 下划线效果 /

}

JS部分：

这部分主要是数据和函数部分。data中包含选项卡的数据和当前选项卡的索引。navbarTab函数用于切换选项卡。当点击某个选项卡时，该函数会通过setData改变currentIndex的值，从而显示对应的内容。这部分代码如下：

data: { navbar: ["我发出的", "我收到的"], currentIndex: 0 }, navbarTab: function (e) { this.setData({ currentIndex: e.currentTarget.datasetdex }); }。顶部选项卡的个数可以根据实际需求进行循环设置。以上就是实现微信小程序顶部普通选项卡效果的基本代码。至于中间的内容部分，可以根据实际需求进行填充。为大家推荐一篇由长沙网络推广精心整理的小程序教程，希望大家喜欢并多多支持狼蚁SEO。本文旨在帮助大家了解微信小程序顶部选项卡效果的实现方法，希望对学习微信小程序开发的朋友们有所帮助。如有任何疑问或建议，欢迎与我联系。让我们共同进步，共创美好未来！