uniapp实现选项卡功能
使用uni-app实现选项卡功能
在uni-app中，可以通过uni-segmented-control组件或自定义样式实现选项卡功能。以下是两种常见方法：
方法一：使用uni-segmented-control组件
uni-segmented-control是官方提供的分段器组件，适合简单选项卡场景。
<template>
<view>
<uni-segmented-control
:current="current"
:values="items"
@clickItem="onClickItem"
/>
<view v-if="current === 0">内容1</view>
<view v-if="current === 1">内容2</view>
</view>
</template>
<script>
export default {
data() {
return {
items: ['选项卡1', '选项卡2'],
current: 0
}
},
methods: {
onClickItem(e) {
this.current = e.currentIndex
}
}
}
</script>方法二：自定义选项卡样式
通过flex布局和动态样式实现更灵活的选项卡。
<template>
<view>
<view class="tab-bar">
<view
v-for="(item, index) in tabs"
:key="index"
:class="['tab-item', currentTab === index ? 'active' : '']"
@click="switchTab(index)"
>
{{ item }}
</view>
</view>
<view class="content">
<view v-show="currentTab === 0">内容1</view>
<view v-show="currentTab === 1">内容2</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
tabs: ['选项卡1', '选项卡2'],
currentTab: 0
}
},
methods: {
switchTab(index) {
this.currentTab = index
}
}
}
</script>
<style>
.tab-bar {
display: flex;
border-bottom: 1px solid #eee;
}
.tab-item {
flex: 1;
text-align: center;
padding: 15px 0;
}
.active {
color: #007AFF;
border-bottom: 2px solid #007AFF;
}
.content {
padding: 15px;
}
</style>方法三：结合swiper实现滑动切换
通过swiper组件实现滑动切换效果，提升用户体验。
<template>
<view>
<view class="tab-bar">
<view
v-for="(item, index) in tabs"
:key="index"
:class="['tab-item', currentTab === index ? 'active' : '']"
@click="swiperTo(index)"
>
{{ item }}
</view>
</view>
<swiper
:current="currentTab"
@change="swiperChange"
class="swiper"
>
<swiper-item><view>内容1</view></swiper-item>
<swiper-item><view>内容2</view></swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
tabs: ['选项卡1', '选项卡2'],
currentTab: 0
}
},
methods: {
swiperTo(index) {
this.currentTab = index
},
swiperChange(e) {
this.currentTab = e.detail.current
}
}
}
</script>
<style>
/* 同上一个示例的样式 */
.swiper {
height: 300px;
}
</style>注意事项
- 性能优化：频繁切换选项卡时，建议使用
v-show而非v-if减少DOM操作。 - 样式兼容：不同平台（小程序/H5）的
swiper组件可能存在差异，需测试调整。 - 扩展性：可通过
slot或动态渲染内容实现更复杂的选项卡结构。
以上方法可根据实际需求选择或组合使用，uni-segmented-control适合简单场景，自定义方案灵活性更高。
