Taro实现 微信小程序 可左右滑动切换的Tab组件

image.png

左右滑动切换Tab

一、文件组成：

• BgTitleTouchGroup.vue
• BgTitleTouchGroup.less
• BgTitleTouchItem.vue
• BgTitleTouchItem.less
• announcement.vue

1、BgTitleTouchGroup.vue

2、BgTitleTouchGroup.less

.tab-group {
    width: 100%;
    overflow: hidden;
    .bg-title-list {
        white-space: nowrap;
        .normal {
            display: inline-block;
            font-size: 26rpx;
        }
        .tab-item-box {
            display: inline-block;
            margin-right: 61rpx;
        }
        .tab-item-box:last-child {
            margin-right:0;
        }
    }
    .content {
        .tabs__track {
            position: relative;
            width: 100%;
            height: 100%;
            will-change: left;
        }
    }
}

3、BgTitleTouchItem.vue

4、BgTitleTouchItem.less

.tab-item {
    width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
}
.tab-item_inactive {
    height: 0;
    overflow: visible;
}

5、announcement.vue