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

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 파일에서 <navigator> 태그를 사용하여 "카테고리" 페이지를 참조하세요. <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

rrreee

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

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

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

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