Bagaimana untuk melaksanakan pensuisan gelongsor tabbar dalam UniAPP

Dengan kemajuan berterusan pembangunan Internet mudah alih, pembangunan aplikasi APP telah menarik lebih banyak perhatian. Dalam pembangunan APP, bar tab, sebagai corak reka bentuk halaman biasa, digunakan secara meluas dalam pelbagai APP. Dalam corak reka bentuk ini, suis halaman yang berbeza biasanya dilakukan dengan mengklik bar tab. Tetapi bagi pengguna yang ingin menyemak imbas halaman yang berbeza dengan pantas, meluncur untuk beralih mungkin merupakan pilihan yang lebih baik.

Sebagai alat pembangunan merentas platform, UniAPP menyediakan kami cara mudah untuk membuat pensuisan gelongsor tabbar. Artikel ini akan memperkenalkan cara UniAPP melaksanakan pensuisan gelongsor bar tab, dengan kod sampel terperinci.

1. Idea pelaksanaan

Kesan yang ingin kami capai ialah apabila pengguna meluncur ke kiri atau kanan dalam halaman bar tab, dia boleh bertukar secara automatik ke halaman yang sepadan. Proses ini boleh dicapai melalui komponen swiper dalam UniAPP, dan kodnya sangat mudah. Kita hanya perlu melakukan beberapa konfigurasi untuk menjadikan suis gelongsor berkuat kuasa.

2. Langkah pelaksanaan

1. Pertama, cari halaman bar tab dalam projek Anda boleh mencari dan membuka fail vue yang sepadan dalam direktori halaman.
2. Dalam bahagian templat, tambah komponen swiper Anda boleh menggunakan tag uni-swiper untuk menambahkannya Kod sampel adalah seperti berikut:

<template>
  <view>
    <uni-swiper :current="current" :duration="300" :circular="false" :autoplay="false" @change="swiperChange">
      <uni-swiper-item v-for="(item, index) of tabBarList" :key="item.pagePath">
        <component :is="item.pagePath" ref="pageRef"></component>
      </uni-swiper-item>
    </uni-swiper>
  </view>
</template>

Dalam kod ini, kami. use uni-swiper digunakan untuk melaksanakan fungsi gelongsor, dan atribut semasa digunakan untuk menetapkan halaman semasa ditetapkan kepada palsu untuk menunjukkan bahawa karusel tidak akan berkitar, dan automain ditetapkan kepada palsu untuk menunjukkan bahawa ia tidak akan. bermain secara automatik. Selain itu, kami juga menambah komponen komponen pada setiap item leret untuk mewakili kandungan setiap halaman dalam bar tab.

3. Dalam bahagian skrip, kita perlu mengkonfigurasi tabBar dan menambah beberapa fungsi dan pembolehubah yang diperlukan Kita memerlukan kod berikut:

<script>
export default {
  data() {
    return {
      current: 0,
      tabBarList: [
        {
          text: '首页',
          iconPath: '/static/tabbar/home.png',
          selectedIconPath: '/static/tabbar/home-active.png',
          pagePath: '/pages/index/index',
        },
        {
          text: '分类',
          iconPath: '/static/tabbar/category.png',
          selectedIconPath: '/static/tabbar/category-active.png',
          pagePath: '/pages/category/category',
        },
        {
          text: '购物车',
          iconPath: '/static/tabbar/cart.png',
          selectedIconPath: '/static/tabbar/cart-active.png',
          pagePath: '/pages/cart/cart',
        },
        {
          text: '我的',
          iconPath: '/static/tabbar/user.png',
          selectedIconPath: '/static/tabbar/user-active.png',
          pagePath: '/pages/mine/mine',
        },
      ],
    };
  },
  methods: {
    swiperChange(e) {
      this.current = e.detail.current;
      uni.switchTab({
        url: this.tabBarList[this.current].pagePath,
      });
    },
  },
};
</script>

Dalam kod ini, kita Empat. halaman tabBar dikonfigurasikan dan pembolehubah semasa ditakrifkan untuk merekod halaman semasa. Pada masa yang sama, kami menentukan fungsi yang dipanggil swiperChange untuk mendengar peristiwa perubahan halaman. Dalam fungsi swiperChange, kami menggunakan fungsi uni.switchTab untuk menukar halaman semasa ke halaman yang sepadan.

Dengan cara ini, kami telah menyelesaikan pengeluaran pensuisan gelongsor tabbar dan boleh pratonton dan nyahpepijat.

3. Ringkasan

Artikel ini memperkenalkan kaedah UniAPP untuk melaksanakan pensuisan gelongsor tabbar dan memberikan kod sampel terperinci. Dengan mempelajari dan mempraktikkan kod ini, kami boleh mencipta aplikasi APP kami sendiri dengan cepat dan memberikan pengguna pengalaman pengguna yang lebih baik. Pada masa yang sama, UniAPP, sebagai alat pembangunan merentas platform, juga boleh menyokong berjalan pada berbilang platform, yang sangat mengurangkan kesukaran pembangunan dan beban kerja kami.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan pensuisan gelongsor tabbar dalam UniAPP. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!