在移動應用開發中，商品分類頁面是電商類應用的核心頁面之一。它不僅要展示商品的分類信息，還要提供良好的用戶體驗，使用戶能夠快速找到所需的商品。本文將詳細介紹如何使用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 是項目的入口文件。商品分類頁面通常由三個主要部分組成：頂部導航欄、側邊欄分類和商品展示區。下面我們將分別介紹如何實現這三個部分。
頂部導航欄通常包含應用的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>
側邊欄分類通常是一個垂直滾動的列表，用戶可以點擊不同的分類來查看對應的商品。我們可以使用 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>
商品展示區通常是一個網格布局，展示商品的圖片、名稱、價格等信息。我們可以使用 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>
在實現商品分類頁面時，我們需要與后端接口進行交互，獲取分類數據和商品數據。通常，后端會提供以下兩個接口：
GET /api/categoriesGET /api/products?categoryId=xxx我們可以使用 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 }
});
}
在獲取到數據后，我們需要對數據進行處理，以便在頁面中展示。例如，我們可以將分類數據和商品數據分別存儲在 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();
}
}
當用戶點擊側邊欄的分類時，我們需要更新當前選中的分類，并獲取該分類下的商品數據。
methods: {
selectCategory(index) {
this.activeIndex = index;
this.fetchProducts(this.categories[index].id);
}
}
當用戶點擊某個商品時，我們可以跳轉到商品詳情頁面，展示該商品的詳細信息。
methods: {
viewProductDetail(productId) {
uni.navigateTo({
url: `/pages/product/detail?id=${productId}`
});
}
}
為了提升用戶體驗，我們可以為商品展示區添加下拉刷新和上拉加載更多的功能。
<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>
在樣式設計上，我們可以使用 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;
}
為了提高頁面的加載速度和用戶體驗，我們可以采取以下優化措施：
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 實現一個功能完善的商品分類頁面。我們從頁面布局、數據獲取與處理、交互邏輯、樣式與優化等方面進行了全面的介紹。希望本文能夠幫助你在實際項目中快速實現商品分類頁面，并提升用戶體驗。
在實際開發中，還需要根據具體需求進行適當的調整和優化。例如，可以添加更多的交互效果、優化網絡請求、提升頁面加載速度等。希望你能在開發過程中不斷探索，打造出更加優秀的應用。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
