<template> <view> <v-tabsv-model=”current”:tabs=”tabs” @change=”changeTab”></v-tabs> </view></template><script>export default { data() { return { current: 0, tabs: ['推荐', '热门', '最新', '视频'] } }, methods: { changeTab(index) { console.log('当前选中：', index) } }}</script>

<v-tabs v-model=”current” :tabs=”tabs” @change=”changeTab”></v-tabs>

data() { return { current: 0, tabs: ['推荐', '热门', '最新', '视频', '图片', '音乐', '科技', '体育', '娱乐', '财经'] }}

<v-tabs v-model=”current” :tabs=”tabs” :scroll=”false” @change=”changeTab”></v-tabs>

tabs: ['全部', '待付款', '待发货', '已完成']

<v-tabs v-model=”current” :tabs=”tabs” :pills=”true” line-height=”0” activeColor=”#fff” pillsColor=”#2979ff” pillsBorderRadius=”30rpx”></v-tabs>

<v-tabs v-model=”current” :tabs=”tabs” bgColor=”#1a1a2e” color=”#aaa” activeColor=”#e94560” lineColor=”#e94560” lineHeight=”6rpx”></v-tabs>

<v-tabs v-model=”current” :tabs=”tabs” bgColor=”linear-gradient(90deg, #667eea, #764ba2)” color=”rgba(255,255,255,0.6)” activeColor=”#fff” lineColor=”#fff”></v-tabs>

<v-tabs v-model=”current” :tabs=”tabs” fontSize=”26rpx” activeFontSize=”34rpx” :bold=”true”></v-tabs>

<v-tabs v-model=”current” :tabs=”tabs” height=”90rpx” lineHeight=”6rpx” lineColor=”#e94560” :lineScale=”0.3” lineRadius=”6rpx”></v-tabs>

<v-tabs v-model=”current” :tabs=”categoryTabs” field=”name” :scroll=”false” activeColor=”#16813d” lineColor=”#16813d”></v-tabs>

data() { return { current: 0, categoryTabs: [ { id: 1, name: '水果', count: 12 }, { id: 2, name: '蔬菜', count: 8 }, { id: 3, name: '肉类', count: 15 }, { id: 4, name: '零食', count: 20 } ] }}

// 商品分类 —— field=”name”[{ id: 1, name: '水果', count: 12 }]// 城市选择 —— field=”label”[{ code: 'bj', label: '北京' }]// 状态筛选 —— field=”title”[{ value: 'all', title: '全部' }]

<v-tabs v-model=”current” :tabs=”tabs” :fixed=”true”></v-tabs>

<v-tabs v-model=”current” :tabs=”tabs” padding=”0 30rpx” paddingItem=”0 30rpx”></v-tabs>

<v-tabs v-model=”current” :tabs=”tabs” :lineAnimation=”false”></v-tabs>

<v-tabs v-model=”current” :tabs=”tabs” :pills=”true” :scroll=”false” line-height=”0” activeColor=”#fff” bgColor=”linear-gradient(90deg, #667eea, #764ba2)” pillsColor=”rgba(255,255,255,0.25)” pillsBorderRadius=”35rpx”></v-tabs>

// 添加标签this.tabs.push('新标签')// 移除末尾标签this.tabs.pop()if (this.current >= this.tabs.length) { this.current = this.tabs.length - 1 // 手动修正索引}

// 页面加载时 tabs 为空数组data() { return { asyncTabs: [] }},// 异步请求完成后赋值loadData() { setTimeout(() => { this.asyncTabs = ['手机', '电脑', '平板', '耳机', '手表'] }, 500)}

<v-tabs v-model=”current” :tabs=”tabs” :scroll=”false” activeColor=”#2979ff” lineColor=”#2979ff” :bold=”true” @change=”changeTab”></v-tabs><!-- 通过 v-if 切换内容面板 --><viewv-if=”current === 0”class=”tab-panel”> <viewv-for=”iteminrecommendList” :key=”item.id”> {{ item.title }} </view></view><viewv-if=”current === 1”class=”tab-panel”> <viewv-for=”iteminhotList” :key=”item.id”> {{ item.title }} </view></view>

data() { return { current: 0, tabs: ['推荐', '热门', '最新', '视频'], recommendList: [ { title: '精选好文推荐', desc: '每日精选优质内容' }, { title: '编程入门指南', desc: '从零开始学习编程' } ], hotList: [ { title: '全网热议话题', desc: '本周最受关注的热门话题' }, { title: '技术突破新闻', desc: 'AI领域最新重大突破' } ] }},methods: { changeTab(index) { // 可在此处发起接口请求，实现按需加载 // this.loadData(this.tabs[index]) }}

<v-tabsv-model=”current”:tabs=”tabs”></v-tabs><button @click=”current = 0”>第1项</button><button @click=”current = 2”>第3项</button><button @click=”current = 4”>第5项</button>

prev() { if (this.current > 0) this.current--},next() { if (this.current < this.tabs.length - 1) this.current++}

toggleAutoPlay() { if (this.autoPlaying) { clearInterval(this.autoTimer) } else { this.autoTimer = setInterval(() => { this.current = (this.current + 1) % this.tabs.length }, 1500) } this.autoPlaying = !this.autoPlaying}

<!-- 错误写法：直接写在模板中可能报错 --><text>@change</text><!-- 正确写法：通过数据绑定 --><text>{{ propChange }}</text>

removeTab() { this.tabs.pop() // 必须检查！否则删除最后一个标签后 current 可能越界 if (this.current >= this.tabs.length) { this.current = this.tabs.length - 1 }}

<!-- 胶囊模式下隐藏下划线 --><v-tabs:pills=”true”line-height=”0”></v-tabs>

<template>  <view:id="elId"class="v-tabs">    <scroll-view      id="scrollContainer"      :scroll-x="scroll"      :scroll-left="scroll ? scrollLeft : 0"      :scroll-with-animation="scroll"      :style="{ position: fixed ? 'fixed' : 'relative', zIndex: 1993 }"    >      <view        class="v-tabs__container"        :style="{          display: scroll ? 'inline-flex' : 'flex',          whiteSpace: scroll ? 'nowrap' : 'normal',          background: bgColor,          height,          padding        }"      >        <view          class="v-tabs__container-item"          v-for="(v, i) in tabs"          :key="i"          :style="{            color: current == i ? activeColor : color,            fontSize: current == i ? fontSize : fontSize,            fontWeight: bold && current == i ? 'bold' : '',            justifyContent: !scroll ? 'center' : '',            flex: scroll ? '' : 1,            padding: paddingItem          }"          @click="change(i)"        >          {{ field ? v[field] : v }}        </view>        <view          v-if="!pills"          :class="['v-tabs__container-line', {animation: lineAnimation}]"          :style="{            background: lineColor,            width: lineWidth + 'px',            height: lineHeight,            borderRadius: lineRadius,            left: lineLeft + 'px',            transform: `translateX(-${lineWidth / 2}px)`          }"        ></view>        <view          v-else          :class="['v-tabs__container-pills', {animation: lineAnimation}]"          :style="{            background: pillsColor,            borderRadius: pillsBorderRadius,            left: pillsLeft + 'px',            width: currentWidth + 'px',            height          }"        ></view>      </view>    </scroll-view>    <view      class="v-tabs__placeholder"      :style="{        height: fixed ? height : '0',        padding      }"    ></view>  </view></template><script>/** * v-tabs * @property {Number} value 选中的下标 * @property {Array} tabs tabs 列表 * @property {String} bgColor = '#fff' 背景颜色 * @property {String} color = '#333' 默认颜色 * @property {String} activeColor = '#2979ff' 选中文字颜色 * @property {String} fontSize = '28rpx' 默认文字大小 * @property {String} activeFontSize = '28rpx' 选中文字大小 * @property {Boolean} bold = [true | false] 选中文字是否加粗 * @property {Boolean} scroll = [true | false] 是否滚动 * @property {String} height = '60rpx' tab 的高度 * @property {String} lineHeight = '10rpx' 下划线的高度 * @property {String} lineColor = '#2979ff' 下划线的颜色 * @property {Number} lineScale = 0.5 下划线的宽度缩放比例 * @property {String} lineRadius = '10rpx' 下划线圆角 * @property {Boolean} pills = [true | false] 是否胶囊样式 * @property {String} pillsColor = '#2979ff' 胶囊背景色 * @property {String} pillsBorderRadius = '10rpx' 胶囊圆角大小 * @property {String} field 如果是对象，显示的键名 * @property {Boolean} fixed = [true | false] 是否固定 * @property {String} paddingItem = '0 22rpx' 选项的边距 * @property {Boolean} lineAnimation = [true | false] 下划线是否有动画 * * @event {Function(current)} change 改变标签触发 */export default {  props: {    value: {      type: Number,      default: 0    },    tabs: {      type: Array,      default () {        return []      }    },    bgColor: {      type: String,      default: '#fff'    },    padding: {      type: String,      default: '0'    },    color: {      type: String,      default: '#333'    },    activeColor: {      type: String,      default: '#2979ff'    },    fontSize: {      type: String,      default: '28rpx'    },    activeFontSize: {      type: String,      default: '32rpx'    },    bold: {      type: Boolean,      default: true    },    scroll: {      type: Boolean,      default: true    },    height: {      type: String,      default: '70rpx'    },    lineColor: {      type: String,      default: '#2979ff'    },    lineHeight: {      type: String,      default: '10rpx'    },    lineScale: {      type: Number,      default: 0.5    },    lineRadius: {      type: String,      default: '10rpx'    },    pills: {      type: Boolean,      default: false    },    pillsColor: {      type: String,      default: '#2979ff'    },    pillsBorderRadius: {      type: String,      default: '10rpx'    },    field: {      type: String,      default: ''    },    fixed: {      type: Boolean,      default: false    },    paddingItem: {      type: String,      default: '0 22rpx'    },    lineAnimation: {      type: Boolean,      default: true    }  },  data () {    return {      elId: '',      lineWidth: 30,      currentWidth: 0, // 当前选项的宽度      lineLeft: 0, // 滑块距离左侧的位置      pillsLeft: 0, // 胶囊距离左侧的位置      scrollLeft: 0, // 距离左边的位置      containerWidth: 0, // 容器的宽度      current: 0 // 当前选中项    }  },  watch: {    value (newVal) {      this.current = newVal      this.$nextTick(() => {        this.getTabItemWidth()      })    },    current (newVal) {      this.$emit('input', newVal)    },    tabs (newVal) {      this.$nextTick(() => {        this.getTabItemWidth()      })    }  },  methods: {    // 产生随机字符串    randomString (len) {      len = len || 32      let $chars =        'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678' /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/      let maxPos = $chars.length      let pwd = ''      for (let i = 0; i < len; i++) {        pwd += $chars.charAt(Math.floor(Math.random() * maxPos))      }      return pwd    },    // 切换事件    change (index) {      if (this.current !== index) {        this.current = index        this.$emit('change', index)      }    },    // 获取左移动位置    getTabItemWidth () {      let query = uni        .createSelectorQuery()        // #ifndef MP-ALIPAY        .in(this)      // #endif      // 获取容器的宽度      query        .select(`#scrollContainer`)        .boundingClientRect((data) => {          if (!this.containerWidth && data) {            this.containerWidth = data.width          }        })        .exec()      // 获取所有的 tab-item 的宽度      query        .selectAll('.v-tabs__container-item')        .boundingClientRect((data) => {          if (!data) {            return          }          let lineLeft = 0          let currentWidth = 0          if (data) {            for (let i = 0; i < data.length; i++) {              if (i < this.current) {                lineLeft += data[i].width              } else if (i == this.current) {                currentWidth = data[i].width              } else {                break              }            }          }          // 当前滑块的宽度          this.currentWidth = currentWidth          // 缩放后的滑块宽度          this.lineWidth = currentWidth * this.lineScale * 1          // 滑块作移动的位置          this.lineLeft = lineLeft + currentWidth / 2          // 胶囊距离左侧的位置          this.pillsLeft = lineLeft          // 计算滚动的距离左侧的位置          if (this.scroll) {            this.scrollLeft = this.lineLeft - this.containerWidth / 2          }        })        .exec()    }  },  mounted () {    this.elId = 'xfjpeter_' + this.randomString()    this.current = this.value    this.$nextTick(() => {      this.getTabItemWidth()    })  }}</script><stylelang="scss"scoped>.v-tabs {  width: 100%;  box-sizing: border-box;  overflow: hidden;  ::-webkit-scrollbar {    display: none;  }  &__container {    min-width: 100%;    position: relative;    display: inline-flex;    align-items: center;    white-space: nowrap;    overflow: hidden;    &-item {      display: flex;      align-items: center;      height: 100%;      position: relative;      z-index: 10;      // padding: 0 11px;      transition: all 0.3s;      white-space: nowrap;    }    &-line {      position: absolute;      bottom: 0;    }    &-pills {      position: absolute;      z-index: 9;    }    &-line,    &-pills {      &.animation {        transition: all 0.3s linear;      }    }  }}</style>