uView的u-tabs怎么实现默认标签
时间: 2024-02-11 10:06:09 浏览: 213
uniapp uView u-picker组件三级联动Demo
在uView中,u-tabs组件也可以通过设置`activeIndex`属性来实现默认标签的功能,和上面的方法类似。具体步骤如下:
1. 在template中,添加u-tabs组件,并在其中添加多个u-tab组件作为标签页。例如:
```html
<template>
<u-tabs v-model="activeIndex">
<u-tab title="Tab1">This is Tab1</u-tab>
<u-tab title="Tab2">This is Tab2</u-tab>
<u-tab title="Tab3">This is Tab3</u-tab>
</u-tabs>
</template>
```
2. 在script中,定义`activeIndex`属性,并将其默认值设置为需要显示的标签页的索引值。例如,将Tab2设置为默认标签:
```javascript
<script>
export default {
data() {
return {
activeIndex: 1 // 索引从0开始,Tab2的索引为1
}
}
}
</script>
```
这样,当页面加载时,u-tabs就会默认显示Tab2标签页。
另外,uView还提供了一个`defaultIndex`属性,可以直接在u-tabs组件中设置默认标签页的索引值。例如:
```html
<template>
<u-tabs v-model="activeIndex" :defaultIndex="1">
<u-tab title="Tab1">This is Tab1</u-tab>
<u-tab title="Tab2">This is Tab2</u-tab>
<u-tab title="Tab3">This is Tab3</u-tab>
</u-tabs>
</template>
```
这样,也可以将Tab2设置为默认标签页。
阅读全文