uniapp-tab栏切换

最新推荐文章于 2024-07-24 09:50:55 发布

Bunury

最新推荐文章于 2024-07-24 09:50:55 发布

阅读量314

点赞数 1

分类专栏： Uniapp 文章标签： uni-app java 前端

本文链接：https://blog.csdn.net/weixin_49352307/article/details/138758246

版权

Uniapp 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<view class="viewport">
    <!-- tabs -->
    <view class="tabs">
      <text class="item" v-for="(item, index) in orderTabs" :key="item.title" @tap="taphadle(index)">
        {{ item.title }}
      </text>
      <!-- 游标 -->
      <view class="cursor" :style="{ left: activeIndex * 20.5 + '%',width:'15px'}"></view>
    </view>
    <!-- 滑动容器 -->
    <swiper class="swiper" :current="activeIndex" @change="activeIndex = $event.detail.current" style="height: 800px;">
      <!-- 滑动项 -->
      <swiper-item  v-for="item in 5" :key="item">
       
      //滑动页中的每一项

      </swiper-item>
    </swiper>
  </view>

  page {
    height: 100%;
    overflow: hidden;
  }

  .viewport {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #fff;
  }

  // tabs
  .tabs {
    display: flex;
    justify-content: space-around;
    line-height: 60rpx;
    margin: 0 10rpx;
    background-color: #fff;
    box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);
    position: relative;
    z-index: 9;

    .item {
      flex: 1;
      text-align: center;
      padding: 20rpx;
      font-size: 28rpx;
      color: #262626;
    }

    .cursor {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 20%;
      height: 6rpx;
      padding: 0 50rpx;
      background-color: #27ba9b;
      /* 过渡效果 */
      transition: all 0.4s;
    }
  }

  // swiper
  .swiper {
    background-color: #f7f7f8;
  }

  .container {
    overflow: hidden;
  }

  .uni-body {
    font-size: 10px;
    margin-right: 60px;
  }

 data() {
      return {
        activeIndex: 1,//tab索引项
        type: 0,//页面传参tab项
        itemsArray: [],//暂时存储商品列表项
        itemss: [],//存储商品列表项
        orderTabs: [{
            orderState: 0,
            title: '全部'
          },
          {
            orderState: 1,
            title: '待付款'
          },
          {
            orderState: 2,
            title: '待发货'
          },
          {
            orderState: 3,
            title: '待收货'
          },
          {
            orderState: 4,
            title: '待评价'
          },
        ],

      };
    },

   onLoad() {
      this.activeIndex = this.orderTabs.findIndex(tab => tab.orderState === this.type);
    }

   methods:{
    //点击tab栏事件
     async taphadle(index) {
        this.activeIndex = index
      }
    }