uni-app内置选项卡切换
时间: 2023-11-26 16:06:38 浏览: 96
以下是uni-app内置选项卡切换的示例代码:
```html
<template>
<view>
<view class="nav">
<view v-for="(item, index) in navList" :key="index" :class="['nav-item', navIndex === index ? 'active' : '']" @click="checkIndex(index)">
{{ item }}
</view>
</view>
<view class="list">
<view v-for="(item, index) in listData[navIndex]" :key="index" :class="['list-item', listIndex === index ? 'active' : '']" @click="checkListIndex(index)">
{{ item }}
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
navIndex: 0,
navList: ["选项卡一", "选项卡二"],
listIndex: 0,
listData: [
["选项卡一-1", "选项卡一-2", "选项卡一-3"],
["选项卡二-1", "选项卡二-2", "选项卡二-3"]
]
};
},
methods: {
checkIndex(index) {
this.navIndex = index;
this.listIndex = 0;
},
checkListIndex(index) {
this.listIndex = index;
}
}
};
</script>
<style>
.nav {
display: flex;
justify-content: space-around;
background-color: #f5f5f5;
height: 100rpx;
line-height: 100rpx;
}
.nav-item {
font-size: 32rpx;
color: #666;
}
.nav-item.active {
color: #007aff;
}
.list {
display: flex;
justify-content: space-around;
background-color: #fff;
height: 400rpx;
line-height: 400rpx;
}
.list-item {
font-size: 32rpx;
color: #666;
}
.list-item.active {
color: #007aff;
}
</style>
```
阅读全文
相关推荐














