xtf-tabs-swiper

组件说明

xtf-tabs-swiper 将 xtf-tabs 与原生 swiper 双向联动，适用于分类内容切换。支持按索引面板插槽、通用作用域插槽、懒渲染和相邻面板预加载。

基础用法

1. 指定面板

<template>
  <xtf-tabs-swiper v-model="current" :tabs="tabs">
    <template #pane-0><xtf-text text="推荐内容" /></template>
    <template #pane-1><xtf-text text="热门内容" /></template>
  </xtf-tabs-swiper>
</template>
<script>
export default {
  data() {
    return { current: 0, tabs: [{ label: '推荐' }, { label: '热门' }] }
  }
}
</script>

2. 通用 pane 插槽与事件

<template>
  <xtf-tabs-swiper v-model="current" :tabs="tabs" :height="400" @change="changed">
    <template #pane="{ item, index }">
      <view style="padding: 28rpx">
        <xtf-text level="title" :text="item.label" /><xtf-text
          :text="'第 ' + (index + 1) + ' 个面板'" /></view>
</template>
  </xtf-tabs-swiper>
</template>
<script>
export default {
  data() {
    return { current: 0, tabs: [{ label: '订单' }, { label: '售后' }] }
  },
  methods: {
    changed(index) {
      console.log(index)
      uni.showToast({ title: '已切换', icon: 'none' })
    }
  }
}
</script>

3. 懒渲染和滑动控制

<template>
  <view>
    <xtf-checkbox v-model="swipeable" label="允许滑动" /><xtf-tabs-swiper
      :current="1"
      :tabs="tabs"
      lazy
      :preload="1"
      :swipeable="swipeable"
      scrollable
      tabs-variant="card"
      ><template #pane="{ item }"><xtf-statistic :label="item.label" :value="1280" /></template>
</xtf-tabs-swiper>
  </view>
</template>
<script>
export default {
  data() {
    return { swipeable: true, tabs: [{ label: '今日' }, { label: '本周' }, { label: '本月' }] }
  }
}
</script>

---

全部属性

| 属性 | 类型 | 默认值 | 作用描述 | 适用范围 | | --- | --- | --- | --- | | tabs | Array | [] | 标签数据，透传给 xtf-tabs | 标签与面板 | | modelValue/current | String \| Number | undefined/0 | 当前索引，前者优先 | 双向/单向控制 | | height | String \| Number | 320 | swiper 高度，数字为 rpx | 内容高度 | | scrollable/equal | Boolean | false/true | 标签可滚动/均分 | 标签布局 | | tabsVariant | String | 'line' | 透传 xtf-tabs 变体 | 标签风格 | | tabsIndicatorAlign | String | 'stretch' | 指示器对齐 | 标签风格 | | tabsIndicatorWidth/tabsIndicatorInset | String \| Number | ''/'' | 指示器宽度/内缩 | 指示器调整 | | tabsIndicatorColor | String | '' | 指示器颜色 | 主题定制 | | hideTrackIndicator/hideIndicator | Boolean | false/false | 隐藏轨道/指示器 | 简洁样式 | | lazy | Boolean | false | 只渲染已访问及预加载面板 | 性能优化 | | preload | String \| Number | 1 | 懒渲染预加载相邻数量 | 性能平衡 | | swipeable/loop | Boolean | true/false | 启用手势/循环 | 切换行为 | | duration | String \| Number | 300 | 切换动画 ms | 动画调整 | | customClass/customStyle | String / String \| Object | ''/'' | 根节点样式定制 | 样式覆盖 |

tabs 每项支持的字段

tabs 直接传递给 xtf-tabs 的 items；当前组件仅使用 key、value 作为 swiper key，其余公开字段请以 xtf-tabs 文档为准。

事件

事件名称	触发时机	回调参数	参数说明
update:current/update:modelValue/change	点击标签或滑动面板	(index: Number)	新面板索引

---

插槽

插槽名	作用	作用域参数	说明
pane-{index}	指定索引的面板	{ item, index }	例如 pane-0；优先于通用 pane
pane	通用面板	{ item, index }	用于渲染每个标签对应的面板

完整插槽示例：

<template>
  <xtf-tabs-swiper v-model="current" :tabs="tabs" :height="320" @change="changed">
    <template #pane-0="{ item }">
      <view style="padding: 28rpx">
        <xtf-text level="title" :text="item.label" /><xtf-text text="推荐内容" /></view>
</template>
    <template #pane="{ item, index }">
      <view style="padding: 28rpx">
        <xtf-text level="title" :text="item.label" /><xtf-text
          :text="'第 ' + (index + 1) + ' 个面板'" /></view>
</template>
  </xtf-tabs-swiper>
</template>
<script>
export default {
  data() {
    return { current: 0, tabs: [{ label: '推荐' }, { label: '热门' }] }
  },
  methods: {
    changed(index) {
      console.log(index)
    }
  }
}
</script>

主题说明

• 组件自身只设置 18rpx 面板间距。
• 标签及指示器主题完全由内部 xtf-tabs 的 CSS 变量控制。 如需全局调整主题，请在 xtf-config-provider 或主题配置中覆盖 xtf-tabs 相关 CSS 变量。