flex布局实现导航栏横向滚动切换

先看效果视频：

flex布局横向切换

主要css样式：
父元素：
display: flex;overflow-x: auto;justify-content: space-between;
子元素：
flex-shrink: 0;white-space: nowrap;

整体代码如下：

<template><view class="venue-container"><view class="second"><view class="tab-bar"><view v-for="(item, index) in tabList" :key="index" class="tab-item":class="{ active: currentTab === index }" @tap="switchTab(index)">{{ item }}</view></view></view></view>
</template><script>export default {data() {return {tabList: ['图书馆','城建档案馆','文化馆','档案馆','老年大学','蓝羽馆','游泳馆'],currentTab: 0,}},methods: {switchTab(index) {this.currentTab = index;},}}
</script><style lang="scss" scoped>container {padding: 20rpx;.second {overflow: hidden;.tab-bar {display: flex;overflow-x: auto;justify-content: space-between;margin-bottom: 20rpx;.tab-item {flex: 1;text-align: center;padding: 10rpx 20rpx;background-color: #f2f2f2;margin-right: 10rpx;border-radius: 10rpx;font-size: 28rpx;flex-shrink: 0;white-space: nowrap;&.active {background-color: #007aff;color: #fff;}}}}}
</style>