uniapp制作标签页
使用uniapp制作标签页的方法
方法一：使用uni-app官方组件uni-tabs
uni-app提供了uni-tabs组件用于快速创建标签页，支持横向和纵向布局，具有滑动切换效果。
<template>
<view>
<uni-tabs :current="current" @change="changeTab">
<uni-tab title="标签1"></uni-tab>
<uni-tab title="标签2"></uni-tab>
<uni-tab title="标签3"></uni-tab>
</uni-tabs>
<view v-if="current === 0">内容1</view>
<view v-if="current === 1">内容2</view>
<view v-if="current === 2">内容3</view>
</view>
</template>
<script>
export default {
data() {
return {
current: 0
}
},
methods: {
changeTab(e) {
this.current = e.index
}
}
}
</script>方法二：自定义实现标签页
通过view和样式自定义标签页，灵活性更高。
<template>
<view class="tab-container">
<view class="tab-bar">
<view
v-for="(item, index) in tabs"
:key="index"
:class="['tab-item', current === index ? 'active' : '']"
@click="switchTab(index)"
>
{{item.title}}
</view>
</view>
<view class="tab-content">
<view v-show="current === 0">内容1</view>
<view v-show="current === 1">内容2</view>
<view v-show="current === 2">内容3</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
current: 0,
tabs: [
{title: '标签1'},
{title: '标签2'},
{title: '标签3'}
]
}
},
methods: {
switchTab(index) {
this.current = 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;
}
.tab-content {
padding: 15px;
}
</style>方法三：使用第三方组件库
如uView UI等第三方组件库提供了更丰富的标签页组件。
<template>
<u-tabs
:list="list"
:current="current"
@change="change"
></u-tabs>
<view v-if="current === 0">内容1</view>
<view v-if="current === 1">内容2</view>
<view v-if="current === 2">内容3</view>
</template>
<script>
export default {
data() {
return {
current: 0,
list: [
{name: '标签1'},
{name: '标签2'},
{name: '标签3'}
]
}
},
methods: {
change(index) {
this.current = index;
}
}
}
</script>注意事项
- 对于性能要求高的场景，建议使用
v-show而非v-if来切换内容 - 需要滑动效果时，可以结合
swiper组件实现 - 不同平台可能有样式差异，需测试调整
- 动态加载标签内容时注意数据更新机制
