如何实现UniApp中的顶部选项卡切换不同数据

百变鹏仔 4周前 (11-20) #uniapp

文章标签选项卡

随着移动端应用的普及，多数应用都需要一个选项卡功能，使得用户可以方便的在不同的选项卡间切换，显示不同的数据。在uniapp框架中，顶部选项卡切换不同数据也非常的简单。本文将详细介绍如何实现uniapp中的顶部选项卡切换不同数据的功能。

1. 基本思路

UniApp中实现顶部选项卡切换不同数据的思路很简单，就是通过点击选项卡切换不同的数据。在实现时，我们需要用到两个组件：

其中，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 组件实现顶部选项卡切换不同数据的功能。

文章推荐

如何实现UniApp中的顶部选项卡切换不同数据

1. 基本思路

2. 创建 uni-tabs 组件

3. 设置 uni-list-view 组件

4. 数据渲染

详解uni-app（vue）基于InnerAudioContext封装一个基本的音频组件

什么是uni-app

uni-app之小程序包大小优化

uni-app在不同平台下拨打电话的示例

uni-app适配到微信小程序注意事项