当前位置：首页 > news >正文

鸿蒙OSUniApp 开发的商品筛选器与排序功能#三方框架 #Uniapp

news 2025/5/30 15:15:55

使用 UniApp 开发的商品筛选器与排序功能

前言

在电商类移动应用中，商品筛选与排序功能是提升用户体验和转化率的关键。一个优秀的筛选器不仅能帮助用户快速定位心仪商品，还能提升页面性能和交互流畅度。随着鸿蒙（HarmonyOS）生态的壮大，越来越多的开发者选择 UniApp 进行多端开发。本文将以实际案例为基础，详细讲解如何用 UniApp 实现高效、易扩展的商品筛选与排序功能，并给出鸿蒙平台的适配建议。

一、需求与设计思路

1. 需求分析

支持多条件筛选（如分类、价格区间、品牌等）
支持多种排序方式（如价格、销量、上新等）
筛选与排序结果实时反馈
兼容鸿蒙平台，适配不同分辨率
组件化设计，便于复用和扩展

2. 设计思路

使用弹窗（popup）或侧边栏实现筛选面板
通过 v-for 渲染筛选项，支持动态扩展
排序采用顶部Tab或下拉菜单
筛选与排序参数通过 props 和事件与父组件通信
结合 CSS 动画提升交互体验

二、核心代码实现

1. 商品筛选与排序组件结构

<template><view class="filter-bar"><view class="sort-tabs"><viewv-for="(item, idx) in sortOptions":key="item.value":class="['sort-tab', { active: sortValue === item.value }]"@click="onSort(item.value)">{{ item.label }}</view><view class="filter-btn" @click="showFilter = true">筛选</view></view><view v-if="showFilter" class="filter-mask" @click="closeFilter"></view><view v-if="showFilter" class="filter-panel"><view class="filter-section"><view class="filter-title">分类</view><view class="filter-options"><viewv-for="cat in categories":key="cat.id":class="['filter-option', { selected: filter.category === cat.id }]"@click="filter.category = cat.id">{{ cat.name }}</view></view></view><view class="filter-section"><view class="filter-title">价格区间</view><input v-model="filter.minPrice" type="number" placeholder="最低价" class="price-input" /><input v-model="filter.maxPrice" type="number" placeholder="最高价" class="price-input" /></view><view class="filter-section"><view class="filter-title">品牌</view><view class="filter-options"><viewv-for="brand in brands":key="brand.id":class="['filter-option', { selected: filter.brand === brand.id }]"@click="filter.brand = brand.id">{{ brand.name }}</view></view></view><view class="filter-actions"><button @click="resetFilter">重置</button><button class="confirm" @click="applyFilter">确定</button></view></view></view>
</template>

2. 脚本逻辑

<script>
export default {name: 'GoodsFilter',props: {sortOptions: { type: Array, default: () => ([{ label: '综合', value: 'default' },{ label: '价格', value: 'price' },{ label: '销量', value: 'sales' },{ label: '上新', value: 'new' },]) },categories: { type: Array, default: () => [] },brands: { type: Array, default: () => [] },},data() {return {showFilter: false,sortValue: 'default',filter: {category: '',minPrice: '',maxPrice: '',brand: '',},};},methods: {onSort(val) {this.sortValue = val;this.$emit('sort-change', val);},closeFilter() {this.showFilter = false;},resetFilter() {this.filter = { category: '', minPrice: '', maxPrice: '', brand: '' };},applyFilter() {this.showFilter = false;this.$emit('filter-change', { ...this.filter });},},
};
</script>

3. 样式设计

<style scoped>
.filter-bar {background: #fff;box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);position: sticky;top: 0;z-index: 10;
}
.sort-tabs {display: flex;align-items: center;padding: 0 24rpx;height: 88rpx;border-bottom: 1rpx solid #f0f0f0;
}
.sort-tab {margin-right: 32rpx;font-size: 28rpx;color: #666;padding: 0 8rpx;line-height: 88rpx;
}
.sort-tab.active {color: #007aff;font-weight: bold;border-bottom: 4rpx solid #007aff;
}
.filter-btn {margin-left: auto;color: #007aff;font-size: 28rpx;
}
.filter-mask {position: fixed;left: 0; top: 0; right: 0; bottom: 0;background: rgba(0,0,0,0.3);z-index: 99;
}
.filter-panel {position: fixed;left: 0; right: 0; bottom: 0;background: #fff;border-top-left-radius: 24rpx;border-top-right-radius: 24rpx;z-index: 100;padding: 32rpx 24rpx 48rpx 24rpx;animation: slideUp 0.25s;
}
@keyframes slideUp {from { transform: translateY(100%); }to { transform: translateY(0); }
}
.filter-section {margin-bottom: 32rpx;
}
.filter-title {font-size: 28rpx;color: #333;margin-bottom: 16rpx;
}
.filter-options {display: flex;flex-wrap: wrap;
}
.filter-option {background: #f5f5f5;color: #666;border-radius: 8rpx;padding: 12rpx 28rpx;margin-right: 16rpx;margin-bottom: 12rpx;font-size: 26rpx;
}
.filter-option.selected {background: #007aff;color: #fff;
}
.price-input {width: 160rpx;margin-right: 16rpx;padding: 12rpx;border: 1rpx solid #eee;border-radius: 8rpx;font-size: 26rpx;
}
.filter-actions {display: flex;justify-content: space-between;margin-top: 24rpx;
}
button {flex: 1;margin: 0 8rpx;height: 72rpx;border-radius: 12rpx;font-size: 28rpx;background: #f5f5f5;color: #333;border: none;
}
button.confirm {background: #007aff;color: #fff;
}
</style>

三、父页面集成与使用示例

<template><goods-filter:categories="categoryList":brands="brandList"@sort-change="onSortChange"@filter-change="onFilterChange"/><view v-for="item in goodsList" :key="item.id" class="goods-item"><text>{{ item.name }}</text><text>{{ item.price }}</text></view>
</template><script>
import GoodsFilter from '@/components/GoodsFilter.vue';
export default {components: { GoodsFilter },data() {return {categoryList: [{ id: '1', name: '手机' },{ id: '2', name: '电脑' },{ id: '3', name: '配件' },],brandList: [{ id: 'a', name: '华为' },{ id: 'b', name: '荣耀' },{ id: 'c', name: '小米' },],goodsList: [],filterParams: {},sortValue: 'default',};},methods: {onSortChange(val) {this.sortValue = val;this.fetchGoods();},onFilterChange(params) {this.filterParams = params;this.fetchGoods();},async fetchGoods() {// 这里以模拟接口为例，实际可对接后端APIconst res = await uni.request({url: 'https://api.example.com/goods',data: { ...this.filterParams, sort: this.sortValue },});this.goodsList = res.data.list || [];},},mounted() {this.fetchGoods();},
};
</script><style scoped>
.goods-item {background: #fff;margin: 16rpx 24rpx;border-radius: 12rpx;padding: 32rpx 24rpx;box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);display: flex;justify-content: space-between;align-items: center;font-size: 28rpx;
}
</style>