当用户点击页面中的 Tab 后，切换展示相应的商品列表，功能相对简单，快速实现即可。
// 存储高亮的下标
<script setup lang="ts">
// 高亮的下标
const activeIndex = ref(0)
</script><template><!-- 推荐选项 --><view class="tabs"><textclass="text"v-for="(item, index) in subTypes":key="item.id":class="{ active: index === activeIndex }"@tap="activeIndex = index">{{ item.title }}</text></view><!-- 推荐列表 -->// v-show="activeIndex === index" 点击tab切换可以切换数据，tab的交互<scroll-viewscroll-yclass="scroll-view"v-for="(item, index) in subTypes":key="item.id"v-show="activeIndex === index">...省略</scroll-view>
</template><style>
.tabs {display: flex;justify-content: space-evenly;height: 100rpx;line-height: 90rpx;margin: 0 20rpx;font-size: 28rpx;border-radius: 10rpx;box-shadow: 0 4rpx 5rpx rgba(200, 200, 200, 0.3);color: #333;background-color: #fff;position: relative;z-index: 9;.text {margin: 0 20rpx;position: relative;}.active {&::after {content: '';width: 40rpx;height: 4rpx;transform: translate(-50%);background-color: #27ba9b;position: absolute;left: 50%;bottom: 24rpx;}}
}
</style>
)
