<template> <view class="container"> <swiper class="swiper-con both" :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500"> <swiper-item v-for="item in swi" :key="item"> <image class="swiper-imag" :src="item"></image> </swiper-item> </swiper> <tui-tab :tabs="tabs" scroll @change="change" isSticky="true"></tui-tab> </view> </template> <script setup> import { reactive, ref } from 'vue' const tabs = reactive([ '推荐', '食品', '水果蔬菜', '新款男装', '内衣', '女装', '百货', '医药', '手机', '鞋包' ]) const tabBars = reactive([ { name: '凉拌洋葱' }, { name: '南瓜粥' }, { name: '酸辣土豆丝' }, { name: '西红柿炒鸡蛋' }, { name: '酸菜鱼' }, { name: '糖醋排骨' }, { name: '糖醋鱼' }, { name: '鱼香肉丝' }, ]) const change = (index)=>{ index = index } const swi = reactive([ '../../static/images/banner/1.jpg', '../../static/images/banner/2.jpg', '../../static/images/banner/3.jpg', '../../static/images/banner/4.jpg', '../../static/images/banner/5.jpg', ]) </script> <style lang="scss"> .container { ::v-deep .swiper-con { height: 300rpx; .uni-swiper-wrapper { border-radius: 16rpx; } .swiper-i { border-radius: 16rpx; } .swiper-imag { height: 100%; width: 100%; } } } </style>根据tui-tab标签选项卡绑定他对应的内容并且能滑动跟随

您可以将每个标签对应的内容放在一个数组中，然后使用v-for指令循环渲染出来，并将tab的index绑定到swiper的current属性上，实现切换标签时，滑动跟随的效果。具体代码如下：

<template>
<view class="container">
<swiper class="swiper-con both" :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500" :current="currentIndex">
<swiper-item v-for="(item, index) in swi" :key="index">
<image class="swiper-imag" :src="item"></image>
</swiper-item>
</swiper>
<tui-tab :tabs="tabs" scroll @change="change" isSticky="true"></tui-tab>
<view class="tab-content">
<view class="tab-item" v-for="(item, index) in tabBars" :key="index" :class="{'active': currentIndex === index}">
<text>{{item.name}}</text>
</view>
</view>
</view>
</template>

<script setup>
import { reactive, ref } from 'vue'

const tabs = reactive([
'推荐',
'食品',
'水果蔬菜',
'新款男装',
'内衣',
'女装',
'百货',
'医药',
'手机',
'鞋包'
])

const tabBars = reactive([
{ name: '凉拌洋葱' },
{ name: '南瓜粥' },
{ name: '酸辣土豆丝' },
{ name: '西红柿炒鸡蛋' },
{ name: '酸菜鱼' },
{ name: '糖醋排骨' },
{ name: '糖醋鱼' },
{ name: '鱼香肉丝' },
])

const change = (index) => {
currentIndex = index
}

const swi = reactive([
'../../static/images/banner/1.jpg',
'../../static/images/banner/2.jpg',
'../../static/images/banner/3.jpg',
'../../static/images/banner/4.jpg',
'../../static/images/banner/5.jpg',
])

const currentIndex = ref(0)

</script>

<style lang="scss">
.container {
::v-deep .swiper-con {
height: 300rpx;
.uni-swiper-wrapper {
border-radius: 16rpx;
}
.swiper-i {
border-radius: 16rpx;
}
.swiper-imag {
height: 100%;
width: 100%;
}
}
.tab-content {
display: flex;
flex-wrap: wrap;
margin-top: 20rpx;
.tab-item {
width: 25%;
height: 100rpx;
display: flex;
justify-content: center;
align-items: center;
border-top: 2rpx solid #f5f5f5;
border-left: 2rpx solid #f5f5f5;
&:last-child {
border-right: 2rpx solid #f5f5f5;
}
&:nth-child(4n+1) {
border-left: none;
}
&:nth-last-child(-n+4) {
border-bottom: 2rpx solid #f5f5f5;
}
&.active {
background-color: #f5f5f5;
}
}
}
}
</style>