先看案例如图所示
话不多说上代码:
<template>
<view class="treeroot">
<view class="">
<u-tabs
:list="list"
:is-scroll="false"
:current="current"
bar-width="50"
active-color="orange"
@change="change">
</u-tabs>
<view v-if="current == 0">
11
</view>
<view v-if="current == 1">
22
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
//
list: [{
name: "额度恢复记录",
},
{
name: "还款记录",
},
],
//默认展开第几项
current: 0,
};
},
methods: {
change(index) {
this.current = index;
//如报错则用this.current = index.index;代替上面这句
},
},
};
</script>
<style scoped lang="scss">
</style>
文章来源地址https://www.toymoban.com/news/detail-534630.html
文章来源:https://www.toymoban.com/news/detail-534630.html
到了这里,关于uview 中u-tabs如何做tab切换?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!