仿京东淘宝商品列表筛选组件：实现一个高效的侧边栏弹框筛选功能
一、引言
随着电子商务的快速发展，用户体验成为了竞争的关键因素。在众多的电商网站中，如京东和淘宝，商品列表筛选功能为用户提供了便捷的途径来找到心仪的商品。本文将详细介绍如何使用cc-widget、uni-icons和xg-list组件来仿制京东淘宝的商品列表筛选组件，并实现一个高效的侧边栏弹框筛选功能。
二、需求分析
我们的目标是创建一个仿京东淘宝的商品列表筛选组件，具有以下功能：
点击筛选标签时，能够切换到相应的筛选选项。
当点击“价格”标签时，显示价格图标状态；点击其他标签时，重置价格图标状态。
当点击“排序”标签时，显示排序选项；点击其他标签时，隐藏排序选项。
当点击“筛选”标签时，弹出一个侧边栏筛选弹框。
点击综合推荐排序方式时，能够设置当前排序选项，并隐藏排序选项。
点击筛选确定按钮时，能够触发一个事件来处理筛选结果。
三、技术实现
为了实现上述功能，我们需要使用Vue.js框架和一些UI组件库。这里我们选用cc-widget、uni-icons和xg-list组件来实现。
引入必要的组件库
在项目中引入cc-widget、uni-icons和xg-list组件库，确保能够正确使用这些组件。
编写HTML结构
根据需求，编写筛选组件的HTML结构。使用cc-widget、uni-icons和xg-list组件来构建基本的筛选框架。
实现事件处理逻辑
根据需求分析中的事件处理要求，编写相应的方法来处理点击事件。使用Vue.js的事件绑定机制来监听点击事件，并调用相应的方法来处理逻辑。
四、代码实现
使用方法
引入cc-widget uni-icons xg-list组件
事件处理如下：
// 筛选点击
onTabTitleTap(index) {
console.log("index = " + index);
this.setCurrentTabTitleIndex(index);
if ('price' !== index) {
this.resetPriceIconStatus();
}
if ('sort' !== index) {
this.hiddenSortOptions();
}
if ('sort' === index) {
this.toggleSortOptions();
return;
}
if ('volume' === index) {
return;
}
if ('price' === index) {
this.togglePriceIconStatus();
return;
}
if ('filter' === index) {
this.$refs['filter-popup'].open();
return;
}
},
// 综合推荐排列方式点击
onSortOptionTap(index) {
this.setCurrentSortOptionIndex(index);
this.hiddenSortOptions();
console.log("综合推荐排列方式 = " + index);
},
// 筛选确定
onFilterConfirm(e) {
console.log("filter确定 = " + JSON.stringify(e));
}
{{currentSortOptionTitle}}
销量
价格
type="arrowup" :size="12">
type="arrowdown" :size="12">
:size="12">
筛选
:src="!waterfall '/static/product/waterfall.png' : '/static/product/list.png'"
mode="">
@tap="onTabMaskTap">
class="bg-color-grey border-bottom-left-radius-xl border-bottom-right-radius-xl padding-lg sort-options-section">
:key="sortOptionIndex" @tap="onSortOptionTap(sortOptionIndex)">
:color="UNI_COLOR_RED">
:class="{'font-weight-bold': sortOptionIndex === currentSortOptionIndex}">{{sortOption.desc}}
:specificationOptions="specificationOptions" @confirm="onFilterConfirm">
import data from '@/data/product/list';
import config from './list/config.js';
import mixin from '@/common/mixin';
import comProductList from './list/com-product-list';
import comFilter from './list/com-filter';
import comDrawer from './list/com-drawer';
export default {
mixins: [mixin, config],
components: {
comProductList,
comFilter,
comDrawer
},
data() {
return {
serviceOptions: [],
brandOptions: [],
specificationOptions: [],
products: []
}
},
async created() {
const productsPromise = data.products();
const serviceOptionsPromise = data.serviceOptions();
const brandOptionsPromise = data.brandOptions();
const specificationOptionsPromise = data.specificationOptions();
this.specificationOptions = await specificationOptionsPromise;
this.brandOptions = await brandOptionsPromise;
this.serviceOptions = await serviceOptionsPromise;
this.products = await productsPromise;
},
onNavigationBarButtonTap(e) {
this.toggleWaterfall();
},
methods: {
// #ifdef MP-WEIXIN
onBackPressTap() {
uni.navigateBack({
delta: 1
})
},
onWaterfallSwitchTap() {
this.toggleWaterfall();
},
// #endif
onTabMaskTap() {
this.hiddenSortOptions();
},
// 筛选点击
onTabTitleTap(index) {
console.log("index = " + index);
this.setCurrentTabTitleIndex(index);
if ('price' !== index) {
this.resetPriceIconStatus();
}
if ('sort' !== index) {
this.hiddenSortOptions();
}
if ('sort' === index) {
this.toggleSortOptions();
return;
}
if ('volume' === index) {
return;
}
if ('price' === index) {
this.togglePriceIconStatus();
return;
}
if ('filter' === index) {
this.$refs['filter-popup'].open();
return;
}
},
// 综合推荐排列方式点击
onSortOptionTap(index) {
this.setCurrentSortOptionIndex(index);
this.hiddenSortOptions();
console.log("综合推荐排列方式 = " + index);
},
// 筛选确定
onFilterConfirm(e) {
console.log("filter确定 = " + JSON.stringify(e));
}
},
}
.title-line {
width: 50rpx;
height: 8rpx;
background-color: $uni-color-red;
}
/* #ifdef MP-WEIXIN */
.status-bar-placeholder {
@include position(fixed, 0 0 none 0);
height: var(--status-bar-height);
z-index: 10000;
background-color: $uni-color-white;
}
.nav-bar-search-bar {
// width: 430rpx;
}
/* #endif */
$tab-title-section-height: 100rpx;
$tab-title-item-top-section-height: 50rpx;
.tab-title-section-placeholder {
height: $tab-title-section-height;
}
.tab-title-section {
@include position(fixed, 0 0 none 0);
/* #ifdef MP-WEIXIN */
top: 44px;
/* #endif */
/* #ifdef H5 */
top: var(--window-top);
/* #endif */
/* #ifndef APP-NVUE */
z-index: 1;
/* #endif */
}
.tab-title-list-wrap {
height: $tab-title-section-height;
}
.tab-title-list {
height: $tab-title-item-top-section-height + 20rpx;
}
.tab-title-left {
@include flex-layout(column, space-between, center);
}
.tab-title-left-text {
height: $tab-title-item-top-section-height;
@include flex-layout(column, center, center);
}
.tab-title-right-icon {
height: $tab-title-item-top-section-height;
@include flex-layout(column, center, center);
}
.tab-title-mask {
background-color: rgba($color: #000000, $alpha: 0.8);
}
.sort-options-section {
@include position(absolute, $tab-title-section-height 0 none 0);
}
.sort-option {
height: 60rpx;
}
.filter-popup-content {
@include position(absolute, 0 0 0 0);
/* #ifdef MP-WEIXIN */
top: var(--status-bar-height);
/* #endif */
}
五、测试与验证
在代码实现完成后，我们需要进行测试与验证来确保功能的正确性。可以使用自动化测试工具或手动测试来验证每个功能点的正确性。例如，点击不同的筛选标签时，是否能够正确切换到相应的筛选选项；点击排序标签时，是否能够正确显示和隐藏排序选项；点击筛选确定按钮时，是否能够正确触发事件处理逻辑等。通过详细的测试与验证，可以确保我们的仿京东淘宝商品列表筛选组件的功能正确且健壮。
六、总结与展望
本文详细介绍了如何使用cc-widget、uni-icons和xg-list组件来仿制京东淘宝的商品列表筛选组件，并实现了一个高效的侧边栏弹框筛选功能。通过需求分析和技术实现的过程，我们可以了解到如何使用Vue.js框架和一些UI组件库来实现复杂的交互功能。同时，我们也进行了测试与验证来确保功能的正确性。在未来的工作中，我们可以进一步优化代码结构和性能，提高用户体验和系统的可扩展性。
附完整组件代码下载地址 ： https://mp.weixin.qq.com/s?__biz=MzkxMDUwMTE3MQ==&mid=2247484682&idx=1&sn=078dbbf9ff3b5709a1dea63374838407&chksm=c12b3156f65cb8405ae2148c847ea91233e9e6ccd7893e1f037ab7e90ca06af9bec44a53577a#rd
收录于合集 #前端开发
101个
上一篇基于uQRCode封装的Vue3二维码生成插件下一篇前端可滚动分类商品List列表 可用于电商分类列表