更新记录

2.2.7（2024-04-12）

• 标签栏吸顶时，记录标签内容的滚动高度，在下一次切换回来时回滚到相应位置
• barWidth、barHeight属性支持传入'auto'值，表示滑块宽高可以自适应选中标签的宽高，支持范围见文档

2.2.6（2024-03-15）

• 【修复】抖音小程序报错

2.2.5（2024-03-14）

• bug修复

平台兼容性

y-tabs 标签页组件

注意：

• 2.0.1+为非兼容性升级，重命名了诸多样式以及提供的属性名，也移除了部分属性及事件，如无必要，请勿升级，具体调整内容请查看更新记录。

• Tips
• 支持的平台
• 使用方式
• 滚动吸顶示例
• 与swiper联动示例
• Tabs Props
• Tab Props
• Tabs Events
• Tabs Methods
• Tabs Slots
• Tab Slots
• 注意事项及常见问题

Tips

• 如果有问题，可尝试下载最新代码（示例项目中的uni_modules/y-tabs是最新的）。
• 请保证HBuilderX正式版为 v3.4.18、Alpha版为 v3.5.2。
• 使用该插件需安装scss插件。
• 点击右上角的“使用HubilderX导入示例项目”按钮下载示例项目运行并查看效果，项目中内置不少案例。
• 也可扫描右侧图片中的微信小程序码查看（由于微信小程序审核较严，无法发布新版本，因此案例较老，最好运行示例项目查看）。
• 可以加QQ群交流反馈：566764891；也可以邮箱或QQ留言：18508420370@163.com、1431948195。

支持的平台

• H5、app-vue、微信、支付宝、钉钉、百度、字节、QQ、飞书、快手、京东小程序可用。
• 暂不支持nvue及快应用。

使用方式

1、通过HbuilerX创建项目

• 该组件符合uni_modules规范，使用HbuilderX导入插件到项目根目录下的uni_modules文件夹中。
• template中直接使用，无需单独引入注册组件。
• 该组件依赖于uni-icons，请单独导入。

2、通过vue cli创建项目

• 需保证src下面有uni_modules文件夹，将y-tabs拷贝到里面
• 在pages.json中通过easycom的方式引入组件（tabs组件中使用了uni-icons，因此需要引入uni-ui）

  {
  "easycom": {
      "autoscan": true,
      "custom": {
          "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",
          "^y-(.*)": "@/uni_modules/y-$1/components/y-$1.vue"
      }
  },
  }

普通案例

• 注意：在QQ/百度/字节跳动/飞书/快手小程序中，自定义组件在渲染时会比App/H5端多一级节点，导致标签内容样式失效，需在组件上添加".y-tab-virtual"的样式

<template>
 <view>
     <y-tabs v-model="activeIndex" @click="tabClick"  @change="tabChange">
        <y-tab class="y-tab-virtual" v-for="index in 5" :key="index" :title="'标签'+index">
            <view class="content-wrap"> 内容{{index}} </view>
        </y-tab>
     </y-tabs>
 </view>
</template>
<script>
    export default {
        data() {
            return {
                activeIndex: 0,
            }
        },
        methods: {
            // 标签点击事件
            tabClick(index, item) {
                console.log("tabClick", index, item);
            },
            // 标签切换事件
            tabChange(index, item) {
                console.log("tabChange", index, item);
            }
        }
    }
</script>
<style scoped>
/* #ifdef MP-QQ || MP-BAIDU || MP-TOUTIAO || MP-LARK || MP-KUAISHOU */
.y-tab-virtual {
    position: relative;
    flex-shrink: 0;
    width: 100%;
}
</style>

滚动吸顶示例

直接开启sticky属性即可

<template>
 <view>
     <y-tabs v-model="activeIndex" sticky :offsetTop="offsetTop">
        <y-tab class="y-tab-virtual" v-for="index in 5" :key="index" :title="'标签'+index">
            <view class="content-wrap"> 内容{{index}} </view>
        </y-tab>
     </y-tabs>
 </view>
</template>
<script>
    export default {
        data() {
            return {
                activeIndex: 0,
                offsetTop: 0, //粘性布局下与顶部的最小距离
            }
        },
        created() {
            // H5端需要减去顶部导航栏高度
            // #ifdef H5
            this.offsetTop = 43
            // #endif
        },
    }
</script>
<style scoped>
/* #ifdef MP-QQ || MP-BAIDU || MP-TOUTIAO || MP-LARK || MP-KUAISHOU */
.y-tab-virtual {
    position: relative;
    flex-shrink: 0;
    width: 100%;
}

.content-wrap{
    height:200vh;
}

</style>

与Swiper联动示例

• 请注意Swiper组件的@transition、@animationfinish的支持平台
• barAnimateMode="worm",设置底部条切换类似毛毛虫蠕动的效果
• 经过测试，仅支持App、H5、微信、支付宝、字节跳动、QQ、快手小程序

<template>
 <view>
     <y-tabs ref="tabs" v-model="activeIndex" barAnimateMode="worm">
        <y-tab v-for="(item, index) in tabs" :title="item.title" :key="index" />
     </y-tabs>

     <!--
        支持平台
        1. @transition: 支持App、H5、微信、支付宝、字节跳动、飞书、QQ、快手
        2. @animationfinish: 字节跳动、飞书小程序不支持(在change事件中unlockDx)
      -->

     <swiper class="swiper" :current="activeIndex" @transition="onTransition" @animationfinish="onAnimationfinish" @change="swpierChange">
        <swiper-item v-for="(item, index) in tabs" :key="index">
            <view class="swiper-item-view" :style="{backgroundColor: item.color}">
                {{item.title}}
            </view>
        </swiper-item>
     </swiper>
 </view>
</template>
<script>
    export default {
        data() {
            return {
                tabs: [],
                activeIndex: 0,
            }
        },
        created() {
            this.tabs = Array.from({ length: 5 }, (o, i) => {
                return {
                    title: 'tab' + (i + 1),
                    color: this._getRandomColor()
                }
            });
        },
        methods: {
            //swiper滑动中
            onTransition(e) {
                this.$refs.tabs.setDx(e.detail.dx);
            },
            //swiper滑动结束
            onAnimationfinish(e) {
                this.activeIndex = e.detail.current;
                setTimeout(() => this.$refs.tabs.unlockDx(), 0)  //通知y-tabs解除对setDx()的锁定
            },
            swpierChange(e) {
                //  由于字节跳动、飞书不支持@animationfinish，因此在change事件中unlockDx
                // #ifdef MP-TOUTIAO || MP-LARK
                this.onAnimationfinish(e)
                // #endif
            },
            // 生成随机颜色
            _getRandomColor() {
                const rgb = [];
                for (let i = 0; i < 3; ++i) {
                    let color = Math.floor(Math.random() * 256).toString(16)
                    color = color.length == 1 ? '0' + color : color
                    rgb.push(color)
                }
                return '#' + rgb.join('');
            },
        },
    }
</script>
<style scoped>
.swiper {
    height: 300rpx;
}

.swiper-item-view {
    background-color: #007AFF;
    height: 300rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 50rpx;
}
</style>

Tabs Props

Tab Props

Tabs Events

Tabs Slots

Tab Slots

Tabs Methods

通过 ref 可以获取到 Tabs 实例并调用实例方法(如果是vue3的组合式API,请使用vue3的写法)；

注意事项及常见问题

组件从隐藏状态切换到显示状态时，底部条位置错误？

Tabs 组件在挂载时，会获取自身的宽度，并计算出底部条的位置。如果组件一开始处于隐藏状态，则获取到的宽度永远为 0，因此无法展示底部条位置。

解决方法

方法一，如果是使用 v-show 来控制组件展示的，则替换为 v-if 即可解决此问题：

<!-- Before -->
<y-tabs v-show="show" />
<!-- After -->
<y-tabs v-if="show" />

方法二，调用组件的 resize 方法来主动触发重绘：

<y-tabs v-show="show" ref="tabs" />

this.$refs.tabs.resize();

标签选中后，样式变化可能会导致底部条错误

对于选中的标签，在放大字体的同时添加了过渡样式且有过渡时长，会使标签宽高发生变化，导致内部对于滑块的位置计算错误

解决方法

• 可以考虑给每一个标签通过title-style设定固定宽高，避免标签文字放大后标签宽高变化
• 如果没有过渡效果，设置is-dynamic即可解决滑块错误的问题，否则有过渡时长使用了该属性也难以保证滑块位置计算正确

如何解决上下滑动与左右滑动相冲突？

• 直接给标签内容具体的高度，使用scroll-view实现局部滚动 案例 ：滑动切换
• 但是该方式会导致页面级的上拉加载与下拉刷新事件无法触发，因此需要去插件市场找类似的插件

切换标签时页面会闪烁？

标签切换后，显示的内容是异步请求获取数据进行渲染的，请给标签内容一个实际的最小高度,避免数据清空后高度回弹有导致页面闪烁

在u-popup组件中的y-tabs组件需resize一次

对于在u-popup中的tabs，在弹出层显示后需调用resize方法，避免内部计算错误 案例 ：在Popup中的标签页

<u-popup :show="show" :round="10" @close="show = false" @open="open">
    <y-tabs ref="tabs" v-model="activeIndex">
    ...
    </y-tabs>
</u-popup>

export default{
    data(){
        return {
            show: false
        }
    },
    methods:{
        open(){
            this.show = true;
            setTimeout(()=> this.$refs.tabs.resize(),1000)
        }
    }
}

uni-data-select组件显示下拉选项时会被遮挡？

受限于tabs组件样式，内容区域使用了overflow:hidden,导致uni-data-select下拉选项被遮挡，需要给其父容器设置足够的高度才能完整显示

如何在自定义组件中修改y-tabs组件的样式？

在微信小程序端，在自定义组件中使用了y-tabs，需要设置styleIsolation: 'shared',否则在自定义组件中无法修改y-tabs的样式

如何修改y-tabs的样式：

• 如果在自定义组件或页面中引入了y-tabs，使用 ::v-deep 在y-tabs所在的页面进行修改
• 将要修改的样式放在全局样式中，但要给y-tabs赋予一个全局唯一的类名，避免全局样式污染

• 仅在微信小程序端，如果自定义组件中使用了y-tabs并想修改其样式，需要在自定义组件上配置styleIsolation: 'shared'

  export default {
  options: {
      styleIsolation: 'shared'
  },

如何对激活标签的相邻标签设置样式 ？

直接可使用y-tab__prev与y-tab__next 类 案例 ：组合导航(侧边栏导航+滚动导航)-仿京东商品分类

侧边栏导航、滚动导航模式

• 两者内容区域的滚动方式通过pageScroll属性控制
• 为false时，则表示内容页是放在scroll-view中实现的局部滚动 案例 ：滚动导航(区域滚动) | 侧边栏导航(区域滚动)
• 为true时，则表示内容区域是在页面上的，跟随页面滚动而滚动(页面级滚动) 案例 ：滚动导航(页面级滚动) | 侧边栏导航(页面级滚动)
• 如何取舍两者之间的使用，根据场景考虑，比如你的标签页上方有banner图，你需要在滚动过程中让标题栏浮动时，则需要页面级滚动,或者需要触发原生的上拉加载、下拉刷新事件也用该方式；
• 如果你想两种模式在一定高度内滚动，那么就使用局部滚动。

如果标签栏仍出现滚动条，请在全局样式（可放在APP.vue引入的样式文件）中添加如下css：

// 隐藏scroll-view的滚动条
::-webkit-scrollbar {
    display: none;  
    width: 0 !important;  
    height: 0 !important;  
    -webkit-appearance: none;  
    background: transparent;  
}