유니앱에서 상품 분류 탐색을 구현하는 방법

uniapp에서 상품 분류 탐색을 구현하는 방법

소개: 모바일 인터넷의 급속한 발전으로 전자상거래 플랫폼은 사람들이 쇼핑하는 주요 채널 중 하나가 되었습니다. 사용자 경험을 개선하고 사용자가 필요한 제품을 신속하게 찾을 수 있도록 하기 위해 제품 카테고리 탐색이 점점 더 중요해지고 있습니다. 이 기사에서는 uniapp에서 제품 카테고리 탐색을 구현하는 방법을 소개하고 해당 코드 예제를 제공합니다.

1. 준비
시작하기 전에 다음 작업을 준비해야 합니다.

1. HBuilderX와 같은 도구를 사용하여 생성할 수 있는 uniapp 프로젝트입니다.
2. 카테고리 이름 및 해당 제품 목록을 포함한 제품 카테고리 데이터.

2. 카테고리 페이지 만들기

1. uniapp 프로젝트에 페이지를 만들고 이름을 "category"로 지정합니다.
2. "카테고리" 페이지의 vue 파일에 다음 코드를 작성합니다.

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

위 코드는 가로 스크롤 카테고리 목록과 세로 상품 목록을 포함한 상품 카테고리 탐색 페이지를 구현합니다.

3. 페이지 참조

1. 유니앱에서는 카테고리 페이지를 다른 페이지로 참조해야 합니다.
2. 다른 페이지의 vue 파일에서 90553a25cfb9c2089e9e88a5e7e05f40 태그를 사용하여 "카테고리" 페이지를 참조하세요. 90553a25cfb9c2089e9e88a5e7e05f40标签引用“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

rrreee

위 코드는 현재 페이지에 버튼을 표시하고, 사용자가 버튼을 클릭하면 해당 카테고리 페이지로 이동합니다.

4. 데이터 전송 및 페이지 이동🎜🎜🎜"카테고리" 페이지에서 uni.navigateTo 메소드를 사용하여 선택한 카테고리 데이터를 상품 목록 페이지로 전송합니다. 🎜🎜rrreee

🎜"goodsList" 페이지에서 선택한 카테고리 데이터를 받아 해당 데이터를 활용하여 해당 상품 목록을 표시합니다. 🎜🎜rrreee🎜위 코드는 eventChannel을 사용하여 페이지 간 데이터를 전송합니다. 🎜🎜결론: 🎜이 글에서는 유니앱에서 상품 카테고리 탐색을 구현하는 방법을 소개하고 해당 코드 예제를 제공합니다. 실제 개발에서는 필요에 따라 페이지 레이아웃과 스타일을 조정할 수 있으며 백엔드 인터페이스에 따라 실제 제품 분류 데이터를 얻을 수 있습니다. 위 내용이 여러분에게 도움이 되기를 바라며, 즐거운 코딩 되시길 바랍니다! 🎜

위 내용은 유니앱에서 상품 분류 탐색을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!