How to implement the top tab in UniApp to switch different data

With the popularity of mobile applications, most applications require a tab function so that users can easily switch between different tabs and display different data. In the UniApp framework, switching between different data on the top tab is also very simple. This article will introduce in detail how to implement the function of switching different data on the top tab in UniApp.

1. Basic idea

The idea of ​​switching different data on the top tab in UniApp is very simple, which is to switch different data by clicking on the tab. During implementation, we need to use two components:

• uni-tabs: the tab component that comes with UniApp;
• uni -list-view: List component used to display data.

Among them, uni-tabs is used to display tabs. When the user clicks on a different tab, uni-list-view will be displayed based on the tab. is different, the corresponding data is displayed. Next, we will step by step explain how to use these two components to implement the function of switching different data on the top tab.

2. Create the uni-tabs component

First, we create a uni-tabs component for displaying tabs. The specific code is as follows:

<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>

In this code, we create a uni-tabs component and add three uni-tab components to it. uni-tabs The component is a container for tabs and can adapt to the screen size. At the same time, the component also provides some properties and events. Among them, what we need to use is the click event @click. Through this event, we can obtain the information of the tab clicked by the user. Next, we need to process it in the changeTab method to switch tabs.

3. Set up the uni-list-view component

Next, we need to set up a uni-list-view component to display data. The specific code is as follows:

<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>

Here, we created a uni-list-view component and set the list data. Specifically, we store the data in data.tab1, data.tab2, data.tab3 respectively. When the user clicks on different tabs , we can select the corresponding list data according to the subscript of the tab. It should be noted that in the changeTab method, we use the this.$refs[this.listViewRef].refresh() method to force refresh the list data.

4. Data rendering

Finally, we need to render the data into the uni-list-view component. The specific code is as follows:

<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>

Here, we use the v-slot:item template rendering method to achieve data rendering. Specifically, we render the list item data into a view component using the v-for loop.

In this way, we have successfully implemented the function of switching different data on the top tab using the uni-tabs and uni-list-view components in UniApp.

The above is the detailed content of How to implement the top tab in UniApp to switch different data. For more information, please follow other related articles on the PHP Chinese website!