随着移动端应用的普及，多数应用都需要一个选项卡功能，使得用户可以方便的在不同的选项卡间切换，显示不同的数据。在uniapp框架中，顶部选项卡切换不同数据也非常的简单。本文将详细介绍如何实现uniapp中的顶部选项卡切换不同数据的功能。
1. 基本思路
UniApp中实现顶部选项卡切换不同数据的思路很简单，就是通过点击选项卡切换不同的数据。在实现时，我们需要用到两个组件：
-
uni-tabs：UniApp中自带的选项卡组件； -
uni-list-view：用于显示数据的列表组件。
其中，uni-tabs用于显示选项卡，当用户点击不同的选项卡时，uni-list-view会根据选项卡的不同，展示对应的数据。接下来，我们将逐步讲解如何使用这两个组件实现顶部选项卡切换不同数据的功能。
2. 创建 uni-tabs 组件
首先，我们创建一个 uni-tabs 组件，用于显示选项卡。具体代码如下：
<template>
<div>
<uni-tabs @click="changeTab">
<uni-tab :title="tabsData[0]"></uni-tab>
<uni-tab :title="tabsData[1]"></uni-tab>
<uni-tab :title="tabsData[2]"></uni-tab>
</uni-tabs>
</div>
</template>
<script>
export default {
data() {
return {
tabsData: ['选项卡一', '选项卡二', '选项卡三']
}
},
methods: {
changeTab(e) {
// 切换选项卡
}
}
}
</script>这段代码中，我们创建了一个 uni-tabs 组件，并在其中添加三个 uni-tab 组件。uni-tabs 组件是选项卡的容器，可以自适应屏幕大小，同时，该组件还提供了一些属性和事件。其中，我们需要用到的是点击事件 @click，通过该事件，可以获取用户点击的选项卡的信息。接下来，我们需要在 changeTab 方法中进行处理，实现选项卡的切换。
3. 设置 uni-list-view 组件
接下来，我们需要设置一个 uni-list-view 组件用于显示数据。具体代码如下：
<template>
<div>
<uni-tabs @click="changeTab">
<uni-tab :title="tabsData[0]"></uni-tab>
<uni-tab :title="tabsData[1]"></uni-tab>
<uni-tab :title="tabsData[2]"></uni-tab>
</uni-tabs>
<uni-list-view :ref="listViewRef" :list-data="currentData" :show-loading="true"></uni-list-view>
</div>
</template>
<script>
export default {
data() {
return {
tabsData: ['选项卡一', '选项卡二', '选项卡三'],
data: {
tab1: [{...}, {...}, {...}],
tab2: [{...}, {...}, {...}],
tab3: [{...}, {...}, {...}]
},
currentData: [],
listViewRef: 'listView'
}
},
onReady() {
this.changeTab({
detail: {
index: 0
}
})
},
methods: {
changeTab(e) {
// 切换选项卡
let index = e.detail.index
switch (index) {
case 0:
this.currentData = this.data.tab1
break
case 1:
this.currentData = this.data.tab2
break
case 2:
this.currentData = this.data.tab3
break
default:
break
}
// 刷新列表数据
if (this.$refs[this.listViewRef]) {
this.$refs[this.listViewRef].refresh()
}
}
}
}
</script>这里，我们创建了一个 uni-list-view 组件，并且设置了列表数据。具体来说，我们将数据分别存储在了 data.tab1、data.tab2、data.tab3 中，当用户点击不同的选项卡时，我们就可以根据选项卡的下标选择对应的列表数据。需要注意的是，在 changeTab 方法中，我们使用了 this.$refs[this.listViewRef].refresh() 方法，强制刷新列表数据。
4. 数据渲染
最后，我们需要将数据渲染到 uni-list-view 组件中。具体代码如下：
<template>
<div>
<uni-tabs @click="changeTab">
<uni-tab :title="tabsData[0]"></uni-tab>
<uni-tab :title="tabsData[1]"></uni-tab>
<uni-tab :title="tabsData[2]"></uni-tab>
</uni-tabs>
<uni-list-view :ref="listViewRef" :list-data="currentData" :show-loading="true">
<template v-slot:item="{ item }">
<view class="list-item">{{ item }}</view>
</template>
</uni-list-view>
</div>
</template>
<script>
export default {
data() {
return {
tabsData: ['选项卡一', '选项卡二', '选项卡三'],
data: {
tab1: ['数据1', '数据2', '数据3'],
tab2: ['数据4', '数据5', '数据6'],
tab3: ['数据7', '数据8', '数据9'],
},
currentData: [],
listViewRef: 'listView'
}
},
onReady() {
this.changeTab({
detail: {
index: 0
}
})
},
methods: {
changeTab(e) {
// 切换选项卡
let index = e.detail.index
switch (index) {
case 0:
this.currentData = this.data.tab1
break
case 1:
this.currentData = this.data.tab2
break
case 2:
this.currentData = this.data.tab3
break
default:
break
}
// 刷新列表数据
if (this.$refs[this.listViewRef]) {
this.$refs[this.listViewRef].refresh()
}
}
}
}
</script>在这里，我们用了到了 v-slot:item 模板渲染方法，实现数据的渲染。具体来说，我们将列表项的数据使用 v-for 循环渲染到一个 view 组件中。
这样，我们就成功实现了在UniApp中使用 uni-tabs 和 uni-list-view 组件实现顶部选项卡切换不同数据的功能。
