如何實現UniApp中的頂部選項卡切換不同數據

隨著行動裝置應用的普及，多數應用都需要一個選項卡功能，使得使用者可以方便的在不同的選項卡間切換，顯示不同的資料。在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 元件實作頂部選項卡切換不同資料的功能。

以上是如何實現UniApp中的頂部選項卡切換不同數據的詳細內容。更多資訊請關注PHP中文網其他相關文章！