更新记录

1.0.6（2024-03-04）

修复在app端 vue3中滑块背景不显示，只有文字高亮

1.0.5（2023-11-17）

修复vue3使用bug

1.0.4（2023-08-24）

增加自定义宽度设置功能

平台兼容性

next-tabs --是一个tabs标签组件，在标签多的时候，可以配置为左右滑动，标签少的时候，可以禁止滑动。

从uniapp插件市场导入 遇到问题或有建议可以加入QQ群(455948571)反馈
如果觉得组件不错，给五星鼓励鼓励咯！

vue2--使用

<template>
    <view style="font-size: 16px;color: #666;padding: 10px"><text>1、固定顶部</text></view>
    <next-tabs :fixed="true" v-model="current1" :tabs="list1"></next-tabs>
    <view style="font-size: 16px;color: #666;padding: 10px"><text>2、基本用法</text></view>
    <next-tabs v-model="current2" :tabs="list1"></next-tabs>
    <view style="font-size: 16px;color: #666;padding: 10px"><text>3、胶囊使用-1</text></view>
    <next-tabs v-model="current3" :tabs="list1" :pills="true" line-height="0" activeColor="#fff"></next-tabs>
    <view style="font-size: 16px;color: #666;padding: 10px"><text>4、胶囊使用-2</text></view>
    <next-tabs v-model="current4" pillsBorderRadius="30rpx" :tabs="list1" :pills="true" line-height="0" activeColor="#fff"></next-tabs>
    <view style="font-size: 16px;color: #666;padding: 10px"><text>5、平铺整个屏幕</text></view>
    <next-tabs v-model="current5" :tabs="list1" :scroll="false"></next-tabs>
    <view style="font-size: 16px;color: #666;padding: 10px"><text>6、禁用功能</text></view>
    <next-tabs v-model="current6" field="name" :tabs="list2"></next-tabs>
</template>

export default {
  data() {
    return {
      current1: 0,
            current2: 0,
            current3: 0,
            current4: 0,
            current5: 0,
            current6: 0,
            list1: ['兴趣','爱好','习惯','智能科技','生活','积极态度'],
            list2: [
                { id: 1, name: '兴趣', disabled: false },
                { id: 2, name: '爱好', disabled: false },
                { id: 3, name: '习惯', disabled: false },
                { id: 4, name: '智能科技', disabled: true },
                { id: 5, name: '生活', disabled: false },
                { id: 6, name: '积极态度', disabled: false }
            ]
    }
  }
}

vue3--使用

<template>
    <view style="font-size: 16px;color: #666;padding: 10px"><text>1、固定顶部</text></view>
    <next-tabs :fixed="true" v-model:value="current1" :tabs="list1"></next-tabs>
    <view style="font-size: 16px;color: #666;padding: 10px"><text>2、基本用法</text></view>
    <next-tabs v-model:value="current2" :tabs="list1"></next-tabs>
    <view style="font-size: 16px;color: #666;padding: 10px"><text>3、胶囊使用-1</text></view>
    <next-tabs v-model:value="current3" :tabs="list1" :pills="true" line-height="0" activeColor="#fff"></next-tabs>
    <view style="font-size: 16px;color: #666;padding: 10px"><text>4、胶囊使用-2</text></view>
    <next-tabs v-model:value="current4" pillsBorderRadius="30rpx" :tabs="list1" :pills="true" line-height="0" activeColor="#fff"></next-tabs>
    <view style="font-size: 16px;color: #666;padding: 10px"><text>5、平铺整个屏幕</text></view>
    <next-tabs v-model:value="current5" :tabs="list1" :scroll="false"></next-tabs>
    <view style="font-size: 16px;color: #666;padding: 10px"><text>6、禁用功能</text></view>
    <next-tabs v-model:value="current6" field="name" :tabs="list2"></next-tabs>
    <view style="font-size: 16px;color: #666;padding: 10px"><text>7、自定义设置宽度</text></view>
    <next-tabs v-model:value="current7" field="name" :tabs="list3"></next-tabs>
</template>

<script setup lang="ts">
    import { ref } from 'vue'

    const list1 = ref(['兴趣','爱好','习惯','智能科技','生活','积极态度'])
    const list2 = ref([
        { id: 1, name: '兴趣', disabled: false },
        { id: 2, name: '爱好', disabled: false },
        { id: 3, name: '习惯', disabled: false },
        { id: 4, name: '智能科技', disabled: true },
        { id: 5, name: '生活', disabled: false },
        { id: 6, name: '积极态度', disabled: false }
    ])
    // 自定义设置宽度
    const list3 = ref([
        { id: 1, name: '兴趣', disabled: false, width: 100 },
        { id: 2, name: '爱好', disabled: false, width: 100 },
        { id: 3, name: '习惯', disabled: false, width: 100 },
        { id: 4, name: '智能科技', disabled: true, width: 100 },
        { id: 5, name: '生活', disabled: false, width: 100 },
        { id: 6, name: '积极态度', disabled: false, width: 100 }
    ])
    const current1 = ref(0)
    const current2 = ref(0)
    const current3 = ref(0)
    const current4 = ref(0)
    const current5 = ref(0)
    const current6 = ref(0)
    const current7 = ref(0)
</script>

描述

该组件，是一个tabs标签组件，在标签多的时候，可以配置为左右滑动，标签少的时候，可以禁止滑动。

可选参数属性列表

Event 事件