Cara melaksanakan navigasi pengelasan produk dalam uniapp

Cara melaksanakan navigasi pengelasan produk dalam uniapp

Pengenalan: Dengan perkembangan pesat Internet mudah alih, platform e-dagang telah menjadi salah satu saluran utama untuk orang ramai membeli-belah. Untuk meningkatkan pengalaman pengguna dan memudahkan pengguna mencari produk yang mereka perlukan dengan cepat, navigasi kategori produk menjadi semakin penting. Artikel ini akan memperkenalkan cara melaksanakan navigasi kategori produk dalam uniapp dan memberikan contoh kod yang sepadan.

1. Persediaan
Sebelum bermula, kita perlu menyediakan kerja berikut:

1. Projek uniapp, yang boleh dibuat menggunakan alatan seperti HBuilderX.
2. Data kategori produk, termasuk nama kategori dan senarai produk yang sepadan.

2. Buat halaman kategori

1. Buat halaman dalam projek uniapp dan namakannya "kategori".
2. Dalam fail vue halaman "kategori", tulis kod berikut:

<template>
  <view class="container">
    <view class="category-list">
      <scroll-view class="category-scrollview" scroll-x>
        <view class="category-item" v-for="(item, index) in categoryList" :key="index" @click="selectCategory(item)">
          {{ item.name }}
        </view>
      </scroll-view>
    </view>
    <view class="goods-list">
      <view class="goods-item" v-for="(item, index) in selectedCategory.goodsList" :key="index">
        {{ item.name }}
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        categoryList: [
          { name: "分类1", goodsList: [{ name: "商品1" }, { name: "商品2" }, { name: "商品3" }] },
          { name: "分类2", goodsList: [{ name: "商品4" }, { name: "商品5" }, { name: "商品6" }] },
          { name: "分类3", goodsList: [{ name: "商品7" }, { name: "商品8" }, { name: "商品9" }] }
        ],
        selectedCategory: {}
      }
    },
    methods: {
      selectCategory(category) {
        this.selectedCategory = category;
      }
    }
  }
</script>

<style>
  .container {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20rpx;
  }
  .category-list {
    flex: 1;
  }
  .category-scrollview {
    white-space: nowrap;
  }
  .category-item {
    display: inline-block;
    padding: 10rpx 20rpx;
    border-radius: 10rpx;
    background-color: #f2f2f2;
    margin-right: 20rpx;
    color: #333;
    font-size: 28rpx;
  }
  .goods-list {
    flex: 1;
    margin-top: 20rpx;
  }
  .goods-item {
    margin-bottom: 10rpx;
    padding: 10rpx 20rpx;
    border-radius: 10rpx;
    background-color: #f2f2f2;
    color: #333;
    font-size: 28rpx;
  }
</style>

Kod di atas melaksanakan halaman navigasi kategori produk, termasuk senarai kategori menatal mendatar dan senarai produk menegak.

3. Rujukan Halaman

1. Dalam uniapp, kita perlu merujuk halaman kategori ke halaman lain.
2. Dalam fail vue halaman lain, gunakan teg <navigator> untuk merujuk halaman "kategori". <navigator>标签引用“category”页面。

<navigator url="/pages/category/category">
  分类导航
</navigator>

以上代码将在当前页面中显示一个按钮，当用户点击按钮时将跳转到分类页面。

四、数据传递和页面跳转

1. 在“category”页面中，使用uni.navigateTo方法将选中的分类数据传递给商品列表页面。

methods: {
  selectCategory(category) {
    this.selectedCategory = category;
    uni.navigateTo({
      url: '/pages/goodsList/goodsList',
      success: (res) => {
        res.eventChannel.emit('selectedCategory', this.selectedCategory)
      }
    })
  }
}

2. 在“goodsList”页面中，接收选中的分类数据，并使用该数据展示对应的商品列表。

mounted() {
  const eventChannel = this.getOpenerEventChannel()
  eventChannel.on('selectedCategory', (data) => {
    this.selectedCategory = data
  })
},
data() {
  return {
    selectedCategory: {}
  }
}

以上代码通过使用eventChannel

Kod di atas akan memaparkan butang pada halaman semasa, dan apabila pengguna mengklik butang, ia akan melompat ke halaman kategori.

🎜Dalam halaman "goodsList", terima data kategori yang dipilih dan gunakan data untuk memaparkan senarai produk yang sepadan. 🎜🎜rrreee🎜Kod di atas menggunakan eventChannel untuk memindahkan data antara halaman. 🎜🎜Kesimpulan: 🎜Artikel ini memperkenalkan cara melaksanakan navigasi kategori produk dalam uniapp dan menyediakan contoh kod yang sepadan. Dalam pembangunan sebenar, susun atur dan gaya halaman boleh diselaraskan mengikut keperluan, dan data klasifikasi produk sebenar boleh diperolehi mengikut antara muka belakang. Saya harap kandungan di atas dapat membantu anda, dan selamat mengekod! 🎜

Atas ialah kandungan terperinci Cara melaksanakan navigasi pengelasan produk dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!