Cara melaksanakan tab atas dalam UniApp untuk menukar data yang berbeza

Dengan populariti aplikasi mudah alih, kebanyakan aplikasi memerlukan fungsi tab supaya pengguna boleh bertukar antara tab berbeza dan memaparkan data berbeza dengan mudah. Dalam rangka kerja UniApp, bertukar antara data yang berbeza pada tab atas juga sangat mudah. Artikel ini akan memperkenalkan secara terperinci cara melaksanakan fungsi menukar data berbeza pada tab atas dalam UniApp.

1. Idea asas

Idea untuk menukar data yang berbeza pada tab atas dalam UniApp adalah sangat mudah, iaitu menukar data yang berbeza dengan mengklik pada tab. Semasa pelaksanaan, kita perlu menggunakan dua komponen:

• uni-tabs: komponen tab yang disertakan dengan UniApp
• uni-list-view: senarai yang digunakan untuk memaparkan komponen data.

Antaranya, uni-tabs digunakan untuk memaparkan tab Apabila pengguna mengklik pada tab yang berbeza, uni-list-view akan memaparkan data yang sepadan mengikut tab yang berbeza. Seterusnya, kami akan menerangkan langkah demi langkah cara menggunakan kedua-dua komponen ini untuk melaksanakan fungsi menukar data yang berbeza pada tab atas.

2. Cipta komponen uni-tab

Mula-mula, kami cipta komponen uni-tabs untuk memaparkan tab. Kod khusus adalah seperti berikut:

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

Dalam kod ini, kami mencipta komponen uni-tabs dan menambah tiga uni-tab komponen padanya. uni-tabs Komponen ialah bekas untuk tab dan boleh menyesuaikan diri dengan saiz skrin Pada masa yang sama, komponen juga menyediakan beberapa sifat dan peristiwa. Antaranya, apa yang perlu kita gunakan ialah acara klik @click, yang melaluinya kita boleh mendapatkan maklumat tentang tab yang diklik oleh pengguna. Seterusnya, kita perlu memprosesnya dalam kaedah changeTab untuk menukar tab.

3. Sediakan komponen uni-list-view

Seterusnya, kita perlu menyediakan komponen uni-list-view untuk memaparkan data. Kod khusus adalah seperti berikut:

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

Di sini, kami mencipta komponen uni-list-view dan menetapkan data senarai. Khususnya, kami menyimpan data masing-masing dalam data.tab1, data.tab2 dan data.tab3 Apabila pengguna mengklik pada tab yang berbeza, kami boleh memilih data senarai yang sepadan mengikut subskrip tab. Perlu diingat bahawa dalam kaedah changeTab, kami menggunakan kaedah this.$refs[this.listViewRef].refresh() untuk menyegarkan semula data senarai secara paksa.

4. Perenderan data

Akhir sekali, kita perlu memaparkan data ke dalam komponen uni-list-view. Kod khusus adalah seperti berikut:

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

Di sini, kami menggunakan v-slot:item kaedah pemaparan templat untuk memaparkan data. Khususnya, kami menjadikan data item senarai menjadi komponen v-for menggunakan gelung view.

Dengan cara ini, kami telah berjaya melaksanakan fungsi menukar data berbeza pada tab atas dalam UniApp menggunakan komponen uni-tabs dan uni-list-view.

Atas ialah kandungan terperinci Cara melaksanakan tab atas dalam UniApp untuk menukar data yang berbeza. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!