uni-app商品分类页面怎么实现

发布时间：2022-10-10 17:24:32 作者：iii
来源：亿速云阅读：716

uni-app商品分类页面怎么实现

引言

在移动应用开发中，商品分类页面是电商类应用的核心页面之一。它不仅要展示商品的分类信息，还要提供良好的用户体验，使用户能够快速找到所需的商品。本文将详细介绍如何使用uni-app框架实现一个功能完善的商品分类页面。

uni-app简介

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。uni-app 具有跨平台、高效开发、性能优越等特点，非常适合开发电商类应用。

项目结构

在开始实现商品分类页面之前，我们先来看一下uni-app项目的典型结构：

├── pages
│   ├── index
│   │   ├── index.vue
│   │   └── index.json
│   └── category
│       ├── category.vue
│       └── category.json
├── static
│   └── images
├── components
│   └── CategorySidebar.vue
├── store
│   └── index.js
├── api
│   └── category.js
└── main.js

pages 目录存放页面文件，每个页面通常包含一个 .vue 文件和一个 .json 配置文件。
static 目录存放静态资源，如图片、字体等。
components 目录存放可复用的组件。
store 目录用于存放 Vuex 状态管理相关的文件。
api 目录用于存放与后端接口交互的文件。
main.js 是项目的入口文件。

页面布局

商品分类页面通常由三个主要部分组成：顶部导航栏、侧边栏分类和商品展示区。下面我们将分别介绍如何实现这三个部分。

4.1 顶部导航栏

顶部导航栏通常包含应用的Logo、搜索框和一些操作按钮。我们可以使用 uni-app 提供的 uni-nav-bar 组件来实现。

<template>
  <view>
    <uni-nav-bar title="商品分类" left-icon="back" @clickLeft="goBack" />
  </view>
</template>

<script>
export default {
  methods: {
    goBack() {
      uni.navigateBack();
    }
  }
}
</script>

<style scoped>
/* 样式可以根据需求自定义 */
</style>

4.2 侧边栏分类

侧边栏分类通常是一个垂直滚动的列表，用户可以点击不同的分类来查看对应的商品。我们可以使用 scroll-view 组件来实现。

<template>
  <view class="category-container">
    <scroll-view scroll-y class="sidebar">
      <view 
        v-for="(item, index) in categories" 
        :key="index" 
        :class="['sidebar-item', { active: activeIndex === index }]" 
        @click="selectCategory(index)"
      >
        {{ item.name }}
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      categories: [],
      activeIndex: 0
    };
  },
  methods: {
    selectCategory(index) {
      this.activeIndex = index;
      // 根据选中的分类获取商品数据
      this.fetchProducts(this.categories[index].id);
    },
    async fetchCategories() {
      // 获取分类数据
      const res = await this.$api.category.getCategories();
      this.categories = res.data;
    },
    async fetchProducts(categoryId) {
      // 获取商品数据
      const res = await this.$api.category.getProductsByCategory(categoryId);
      this.products = res.data;
    }
  },
  mounted() {
    this.fetchCategories();
  }
}
</script>

<style scoped>
.category-container {
  display: flex;
}

.sidebar {
  width: 200rpx;
  height: 100vh;
  background-color: #f8f8f8;
}

.sidebar-item {
  padding: 20rpx;
  text-align: center;
  border-bottom: 1px solid #eee;
}

.sidebar-item.active {
  background-color: #fff;
  color: #ff0000;
}
</style>

4.3 商品展示区

商品展示区通常是一个网格布局，展示商品的图片、名称、价格等信息。我们可以使用 uni-grid 组件来实现。

<template>
  <view class="product-container">
    <uni-grid :column="2" :show-border="false">
      <uni-grid-item v-for="(product, index) in products" :key="index">
        <view class="product-item" @click="viewProductDetail(product.id)">
          <image :src="product.image" class="product-image" />
          <view class="product-name">{{ product.name }}</view>
          <view class="product-price">￥{{ product.price }}</view>
        </view>
      </uni-grid-item>
    </uni-grid>
  </view>
</template>

<script>
export default {
  data() {
    return {
      products: []
    };
  },
  methods: {
    viewProductDetail(productId) {
      uni.navigateTo({
        url: `/pages/product/detail?id=${productId}`
      });
    }
  }
}
</script>

<style scoped>
.product-container {
  flex: 1;
  padding: 20rpx;
}

.product-item {
  text-align: center;
}

.product-image {
  width: 200rpx;
  height: 200rpx;
}

.product-name {
  font-size: 28rpx;
  margin-top: 10rpx;
}

.product-price {
  font-size: 24rpx;
  color: #ff0000;
  margin-top: 10rpx;
}
</style>

数据获取与处理

5.1 数据接口

在实现商品分类页面时，我们需要与后端接口进行交互，获取分类数据和商品数据。通常，后端会提供以下两个接口：

获取分类列表：GET /api/categories
获取某个分类下的商品列表：GET /api/products?categoryId=xxx

5.2 数据请求

我们可以使用 uni.request 或者 axios 来发送请求。为了便于管理，我们可以将请求封装在 api 目录下的 category.js 文件中。

// api/category.js
import request from '@/utils/request';

export function getCategories() {
  return request({
    url: '/api/categories',
    method: 'GET'
  });
}

export function getProductsByCategory(categoryId) {
  return request({
    url: '/api/products',
    method: 'GET',
    params: { categoryId }
  });
}

5.3 数据处理

在获取到数据后，我们需要对数据进行处理，以便在页面中展示。例如，我们可以将分类数据和商品数据分别存储在 categories 和 products 中。

export default {
  data() {
    return {
      categories: [],
      products: []
    };
  },
  methods: {
    async fetchCategories() {
      const res = await this.$api.category.getCategories();
      this.categories = res.data;
    },
    async fetchProducts(categoryId) {
      const res = await this.$api.category.getProductsByCategory(categoryId);
      this.products = res.data;
    }
  },
  mounted() {
    this.fetchCategories();
  }
}

交互逻辑

6.1 侧边栏点击事件

当用户点击侧边栏的分类时，我们需要更新当前选中的分类，并获取该分类下的商品数据。

methods: {
  selectCategory(index) {
    this.activeIndex = index;
    this.fetchProducts(this.categories[index].id);
  }
}

6.2 商品点击事件

当用户点击某个商品时，我们可以跳转到商品详情页面，展示该商品的详细信息。

methods: {
  viewProductDetail(productId) {
    uni.navigateTo({
      url: `/pages/product/detail?id=${productId}`
    });
  }
}

6.3 下拉刷新与上拉加载

为了提升用户体验，我们可以为商品展示区添加下拉刷新和上拉加载更多的功能。

<template>
  <view class="product-container">
    <scroll-view 
      scroll-y 
      @scrolltolower="loadMore" 
      @refresherrefresh="refresh"
      refresher-enabled
    >
      <uni-grid :column="2" :show-border="false">
        <uni-grid-item v-for="(product, index) in products" :key="index">
          <view class="product-item" @click="viewProductDetail(product.id)">
            <image :src="product.image" class="product-image" />
            <view class="product-name">{{ product.name }}</view>
            <view class="product-price">￥{{ product.price }}</view>
          </view>
        </uni-grid-item>
      </uni-grid>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      products: [],
      page: 1,
      pageSize: 10,
      hasMore: true
    };
  },
  methods: {
    async fetchProducts(categoryId) {
      const res = await this.$api.category.getProductsByCategory(categoryId, this.page, this.pageSize);
      if (res.data.length < this.pageSize) {
        this.hasMore = false;
      }
      this.products = this.products.concat(res.data);
    },
    loadMore() {
      if (this.hasMore) {
        this.page++;
        this.fetchProducts(this.categories[this.activeIndex].id);
      }
    },
    refresh() {
      this.page = 1;
      this.hasMore = true;
      this.products = [];
      this.fetchProducts(this.categories[this.activeIndex].id);
    }
  }
}
</script>

样式与优化

7.1 样式设计

在样式设计上，我们可以使用 uni-app 提供的样式库，也可以自定义样式。为了保持页面的一致性，建议使用统一的颜色、字体和间距。

/* 全局样式 */
page {
  background-color: #f8f8f8;
  font-family: Arial, sans-serif;
}

/* 商品展示区样式 */
.product-container {
  flex: 1;
  padding: 20rpx;
}

.product-item {
  text-align: center;
}

.product-image {
  width: 200rpx;
  height: 200rpx;
}

.product-name {
  font-size: 28rpx;
  margin-top: 10rpx;
}

.product-price {
  font-size: 24rpx;
  color: #ff0000;
  margin-top: 10rpx;
}

7.2 性能优化

为了提高页面的加载速度和用户体验，我们可以采取以下优化措施：

图片懒加载：使用 uni.lazyLoad 组件实现图片懒加载，减少初始加载时的网络请求。
数据分页：在获取商品数据时，采用分页加载的方式，避免一次性加载过多数据。
缓存数据：对于不经常变动的分类数据，可以使用 uni.setStorage 进行缓存，减少重复请求。

// 图片懒加载
<image :src="product.image" lazy-load class="product-image" />

// 数据分页
async fetchProducts(categoryId) {
  const res = await this.$api.category.getProductsByCategory(categoryId, this.page, this.pageSize);
  if (res.data.length < this.pageSize) {
    this.hasMore = false;
  }
  this.products = this.products.concat(res.data);
}

// 缓存分类数据
async fetchCategories() {
  const cachedCategories = uni.getStorageSync('categories');
  if (cachedCategories) {
    this.categories = cachedCategories;
  } else {
    const res = await this.$api.category.getCategories();
    this.categories = res.data;
    uni.setStorageSync('categories', this.categories);
  }
}

总结

通过本文的介绍，我们详细讲解了如何使用 uni-app 实现一个功能完善的商品分类页面。我们从页面布局、数据获取与处理、交互逻辑、样式与优化等方面进行了全面的介绍。希望本文能够帮助你在实际项目中快速实现商品分类页面，并提升用户体验。

在实际开发中，还需要根据具体需求进行适当的调整和优化。例如，可以添加更多的交互效果、优化网络请求、提升页面加载速度等。希望你能在开发过程中不断探索，打造出更加优秀的应用。

uni-app商品分类页面怎么实现

uni-app商品分类页面怎么实现

目录

引言

uni-app简介

项目结构

页面布局

4.1 顶部导航栏

4.2 侧边栏分类

4.3 商品展示区

数据获取与处理

5.1 数据接口

5.2 数据请求

5.3 数据处理

交互逻辑

6.1 侧边栏点击事件

6.2 商品点击事件

6.3 下拉刷新与上拉加载

样式与优化

7.1 样式设计

7.2 性能优化

总结

相关阅读