微信小程序实现tab

最新推荐文章于 2023-07-31 19:54:30 发布

程序猿向前跑

最新推荐文章于 2023-07-31 19:54:30 发布

阅读量450

点赞数

分类专栏：移动端文章标签：微信小程序

本文链接：https://blog.csdn.net/qq_46199553/article/details/128387512

版权

移动端专栏收录该内容

44 篇文章 1 订阅

订阅专栏

在这里插入图片描述

<view>
    <!-- Tab布局 -->
    <view class='navBox'>
        <view class='titleBox' bindtap='titleClick' data-idx='0'>
            <text class="{{0 == currentIndex ? 'fontColorBox' : ''}}">装备</text>
            <hr class="{{0 == currentIndex ? 'lineBox' : 'notLineBox'}}" />
        </view>
        <view class='titleBox' bindtap='titleClick' data-idx='1'>
            <text class="{{1 == currentIndex ? 'fontColorBox1' : ''}}">活动</text>
            <hr class="{{1 == currentIndex ? 'lineBox' : 'notLineBox'}} " />
        </view>
    </view>
    <!-- 内容布局 -->
    <swiper style="height: 90vh;" bindchange='pagechange' current='{{currentIndex}}'>
        <swiper-item class='swiperTtemBox'>
            <view>装备内容1</view>
            <view>装备内容1</view>
            <view>装备内容</view>
            <view>装备内容</view>
            <view>装备内容</view>
            <view>装备内容</view>
            <view>装备内容</view>
            <view>装备内容</view>
            <view>装备内容</view>
            <view>装备内容</view>
            <view>装备内容</view>
            <view>装备内容</view>
            <view>装备内容</view>
            <view>装备内容</view>
            <view>装备内容</view>
            <view>装备内容</view>
            <view>装备内容</view>
            <view>装备内容1</view>
            <view>装备内容</view>
            <view>装备内容2</view>
            <view>装备内容</view>
            <view>装备内容2</view>
            <view>装备内容</view>
            <view>装备内容</view>
            <view>装备内容</view>
            <view>装备内容</view>
            <view>装备内容</view>
            <view>装备内容</view>
            <view>装备内容4</view>
            <view>装备内容</view>
            <view>装备内容6</view>
            <view>装备内容</view>
            <view>装备内容</view>
            <view>装备内容</view>
            <view>装备内容</view>
            <view>装备内容</view>
            <view>装备内容</view>
            <view>装备内容8</view>
            <view>装备内容</view>
            <view>装备内容</view>
            <view>装备内容</view>
            <view>装备内容</view>
            <view>装备内容</view>
            <view>装备内容</view>
            <view>装备内容</view>
            <view>装备内容9</view>
            <view>装备内容10</view>
        </swiper-item>
        <swiper-item class='swiperTtemBox'>
            <view>活动内容</view>
        </swiper-item>
    </swiper>
</view>

Page {
  /* 全局样式 */
  background: rgb(121, 139, 211);
  height: 100%;
  position: fixed;
}

.fontColorBox,
.fontColorBox1 {
  /* 文字默认颜色 */
  color: black;
}

.navBox {
  /* 顶部tab盒子样式 */
  width: 100%;
  height: 108rpx;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navBox view:last-child {
  /* 最后一个tab标题的样式 */
  padding-left: 20%;
}

.titleBox {
  /* 未选中文字的样式 */
  color: rgb(168, 170, 175);
  font-size: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lineBox,.notLineBox{
  /* 选中及未选中底线共同样式 */
  width: 32rpx;
  height: 8rpx;
}

.lineBox {
  /* 选中底线样式 */
  background: rgb(43, 44, 45);
  margin-top: 16rpx;
  border-radius: 4rpx;
}

.notLineBox {
  /* 未选中底线样式 */
  background: transparent;
}

.swiperTtemBox {
  /* 底部内容样式 */
  height: 100vh;
  overflow: scroll;
  margin: 12rpx 0rpx;
  background: white;
  font-size: 28rpx;
}

Page({
  data: {
    currentIndex: 0, //默认是活动项
  },
  // 切换swiper-item触发bindchange事件
  pagechange: function (e) {
    console.log(e,9999)
    // 通过touch判断，改变tab的下标值
    if ("touch" === e.detail.source) {
      let currentPageIndex = this.data.currentIndex;
      currentPageIndex = (currentPageIndex + 1) % 2;
      // 拿到当前索引并动态改变
      this.setData({
        currentIndex: currentPageIndex,
      })
    }
  },

  //点击tab时触发
  titleClick: function (e) {
    this.setData({
      //拿到当前索引并动态改变
      currentIndex: e.currentTarget.dataset.idx
    })
  },
})