uni-app开发商城商品分类左侧导航右侧商品实现步骤

前端

2023-07-31 02:26:00

uni-app开发商城商品分类页面：分步指南

在当今电子商务时代，创建用户友好且高效的在线商店至关重要。商品分类页面是其中不可或缺的组成部分，可以帮助用户轻松浏览和找到他们正在寻找的产品。本文将深入探讨如何使用uni-app开发一个商城商品分类页面，并提供一步步的分步指南。

商品分类页面的重要性

商品分类页面充当在线商店的导航指南，提供清晰且有条理的产品组织。它使客户能够缩小搜索范围，快速定位特定类别或子类别中的商品。精心设计的分类页面可以提升用户体验，提高转换率。

构建商品分类页面

步骤1：创建项目

首先，使用uni-app开发工具创建一个新的uni-app项目。输入项目名称和路径，然后单击“创建”。

步骤2：安装必要插件

为开发商品分类页面，您需要安装一些必备插件：

uni-app-router： 用于路由管理
uni-app-vant： 用于UI组件
uni-app-axios： 用于网络请求

步骤3：创建页面

在项目目录中，创建一个名为“pages”的新文件夹，然后在其中创建一个新文件“category.vue”。

步骤4：编写页面代码

在category.vue文件中，编写页面代码如下：

<template>
  <view>
    <view class="category-nav">
      <navigator @click="goGoodsList" url="/pages/goods/list?categoryId={{item.id}}" v-for="item in categoryList" :key="item.id">
        {{item.name}}
      </navigator>
    </view>
    <view class="category-goods">
      <view class="goods-item" v-for="item in goodsList" :key="item.id">
        <image :src="item.image" alt="商品图片" />
        <view class="goods-name">{{item.name}}</view>
        <view class="goods-price">¥{{item.price}}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      categoryList: [],
      goodsList: []
    };
  },
  onLoad() {
    this.getCategoryList();
    this.getGoodsList();
  },
  methods: {
    getCategoryList() {
      uni.request({
        url: 'https://api.example.com/category/list',
        success: (res) => {
          this.categoryList = res.data.data;
        }
      });
    },
    getGoodsList() {
      uni.request({
        url: 'https://api.example.com/goods/list',
        success: (res) => {
          this.goodsList = res.data.data;
        }
      });
    },
    goGoodsList(e) {
      uni.navigateTo({
        url: e.currentTarget.dataset.url
      });
    }
  }
};
</script>

<style>
.category-nav {
  display: flex;
  flex-direction: column;
  border-right: 1px solid #eee;
}

.category-nav navigator {
  padding: 10px 15px;
  border-bottom: 1px solid #eee;
}

.category-goods {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.goods-item {
  width: 33.33%;
  padding: 10px;
  border: 1px solid #eee;
}

.goods-image {
  width: 100%;
  height: 100px;
  object-fit: contain;
}

.goods-name {
  font-size: 14px;
  color: #333;
}

.goods-price {
  font-size: 16px;
  color: #ff5186;
}
</style>