微信小程序之顶部普通选项卡(非swiper)

最新推荐文章于 2023-11-29 08:54:33 发布

jmin_coming

最新推荐文章于 2023-11-29 08:54:33 发布

阅读量763

点赞数

分类专栏：微信小程序文章标签： swiper tabbar 选项卡

本文链接：https://blog.csdn.net/jian_xi/article/details/77600291

版权

微信小程序专栏收录该内容

14 篇文章 0 订阅

订阅专栏

背景：前段时间写了一个抢红包小程序，里面涉及到了顶部选项卡，把它抽了出来。

效果图：

下面直接上代码:

wxml:

  <view class="navbar">
    <text wx:for="{{navbar}}" data-index="{{index}}" 
    class="item {{currentIndex==index?'active':''}}"
    bindtap="navbarTab" wx:key="unique">{{item}}</text>
  </view>
  <view hidden="{{currentIndex!==0}}">
    
  </view>
  <view hidden="{{currentIndex!==1}}">
    
  </view>

wxss:

.navbar{
  display: flex;
  width: 100%;
  flex-direction: row;
  line-height: 80rpx;
  position: fixed;
  top: 0;
}
.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: {
        navbar: ["我发出的", "我收到的"],
        currentIndex: 0,//tabbar索引
    },
    navbarTab: function (e) {
        this.setData({
            currentIndex: e.currentTarget.dataset.index
        });
    },

以上是实现过程基本代码，省去了中间内容的代码。顶部个数是循环出来的，可以根据自己的实际需求设置。

附：swiper顶部选项卡链接