小程序 Tab栏切换组件

最新推荐文章于 2024-07-22 01:47:16 发布

du_独孤九剑

最新推荐文章于 2024-07-22 01:47:16 发布

阅读量223

点赞数

分类专栏：小程序文章标签：小程序

本文链接：https://blog.csdn.net/qq_38686150/article/details/117792939

版权

小程序专栏收录该内容

32 篇文章 0 订阅

订阅专栏

核心主要用到了 swiper组件

属性	类型	说明
current	Number	当前滑块的 index 默认为0
current-item-id	String	当前滑块的 item-id 不能同时指定 current
bindchange	EventHandle	current 改变时会触发 change 事件

在这里插入图片描述

效果
wxl

<view class="wrapper">
    <view class="head">
        <view class="head-item {{active == 0 ?'bd-btom':''}}" data-tap-id="0" bindtap="toggle">1</view>
        <view class="head-item {{active == 1 ?'bd-btom':''}}" data-tap-id="1" bindtap="toggle">2</view>
        <view class="head-item {{active == 2 ?'bd-btom':''}}" data-tap-id="2" bindtap="toggle">3</view>
    </view>
    <view style="margin-top:20rpx">
        <swiper 
        bindchange="changeTab"
        current-item-id="{{active}}" >
            <swiper-item   item-id="0" style="background:yellow;">
                <view style="width:100%;height:100%;">
                    1
                </view>
            </swiper-item>
            <swiper-item item-id="1" style="background:aqua;">
                <view style="width:100%;height:100%;">
                    2
                </view>
            </swiper-item>
            <swiper-item item-id="2" style="background:rgb(0, 255, 13);">
                <view style="width:100%;height:100%;">
                    3
                </view>
            </swiper-item>
        </swiper>
    </view>
</view>

toggle(e) {
    let {
      tapId
    } = e.currentTarget.dataset
    this.setData({
      active: tapId
    })
  },

  changeTab(e) {
    let {
      current
    } = e.detail
    console.log(current);
    this.setData({
      active:current
    })
    console.log("触发");
  }

wxss

.wrapper,
page {
    width: 100%;
    height: 100%;
    background-color: #fff;
}

.wrapper .head {
    display: flex;
    height: 60rpx;
    text-align: center;
    line-height: 60rpx;
}

.head >view:first-child {
    background-color: red;
}
.head>view:nth-child(2){
    background-color:blue;
}
.head>view:last-child{
    background-color: aqua;
}

.bd-btom {
    border-bottom: 10rpx solid greenyellow;
}

.head-item {
    flex: 1;
}