仿京东淘宝商品列表筛选组件：实现一个高效的侧边栏弹框筛选功能

仿京东淘宝商品列表筛选组件：实现一个高效的侧边栏弹框筛选功能

图片

图片

一、引言

随着电子商务的快速发展，用户体验成为了竞争的关键因素。在众多的电商网站中，如京东和淘宝，商品列表筛选功能为用户提供了便捷的途径来找到心仪的商品。本文将详细介绍如何使用cc-widget、uni-icons和xg-list组件来仿制京东淘宝的商品列表筛选组件，并实现一个高效的侧边栏弹框筛选功能。

二、需求分析

我们的目标是创建一个仿京东淘宝的商品列表筛选组件，具有以下功能：

  1. 点击筛选标签时，能够切换到相应的筛选选项。

  2. 当点击“价格”标签时，显示价格图标状态；点击其他标签时，重置价格图标状态。

  3. 当点击“排序”标签时，显示排序选项；点击其他标签时，隐藏排序选项。

  4. 当点击“筛选”标签时，弹出一个侧边栏筛选弹框。

  5. 点击综合推荐排序方式时，能够设置当前排序选项，并隐藏排序选项。

  6. 点击筛选确定按钮时，能够触发一个事件来处理筛选结果。

三、技术实现

为了实现上述功能，我们需要使用Vue.js框架和一些UI组件库。这里我们选用cc-widget、uni-icons和xg-list组件来实现。

  1. 引入必要的组件库

在项目中引入cc-widget、uni-icons和xg-list组件库，确保能够正确使用这些组件。

  1. 编写HTML结构

根据需求，编写筛选组件的HTML结构。使用cc-widget、uni-icons和xg-list组件来构建基本的筛选框架。

  1. 实现事件处理逻辑

根据需求分析中的事件处理要求，编写相应的方法来处理点击事件。使用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));}
<template><view class=""><!-- #ifdef MP-WEIXIN --><uni-nav-bar fixed status-bar left-icon="back" @clickLeft="onBackPressTap"><view slot="left" class="nav-bar-search-bar" :style="{width: searchBarWidth + 'px'}"><tpl-search-bar cancelButton="none" :radius="10000" @confirm="" @input="" /></view></uni-nav-bar><view class="status-bar-placeholder"></view><!-- #endif --><view class="tab-title-section-placeholder"></view><view class="tab-title-section"><!-- #ifdef MP-WEIXIN --><xg-status-bar></xg-status-bar><!-- #endif --><view class="position-relative "><view class="row-center-center bg-color-white  tab-title-list-wrap"><view class="flex-1 row-between-stretch padding-side-lg  tab-title-list"><view class="row-center-stretch" @tap="onTabTitleTap('sort')"><view class="tab-title-left"><view class="tab-title-left-text"><text class="font-size-lg">{{currentSortOptionTitle}}</text></view><view v-if="currentTabTitleIndex === 'sort'" class="title-line"></view></view><view class="tab-title-right-icon"><uni-icons :type="showSortOptions ? 'arrowup' : 'arrowdown'" :size="12"></uni-icons></view></view><view class="row-center-stretch" @tap="onTabTitleTap('volume')"><view class="tab-title-left"><view class="tab-title-left-text"><text class="font-size-lg">销量</text></view><view v-if="currentTabTitleIndex === 'volume'" class="title-line"></view></view></view><view class="row-center-stretch" @tap="onTabTitleTap('price')"><view class="tab-title-left"><view class="tab-title-left-text"><text class="font-size-lg">价格</text></view><view v-if="currentTabTitleIndex === 'price'" class="title-line"></view></view><view class="column-center-center tab-title-right-icon"><view class="column-center-center" v-if="priceIconStatus === 'all'"><uni-icons class="" v-if="priceIconStatus === 'all' || priceIconStatus === 'up'"type="arrowup" :size="12"></uni-icons><uni-icons class="" v-if="priceIconStatus === 'all' || priceIconStatus === 'down'"type="arrowdown" :size="12"></uni-icons></view><view v-else><uni-icons v-if="priceIconStatus === 'up'" type="arrowup" :size="12"></uni-icons><uni-icons v-if="priceIconStatus === 'down'" type="arrowdown":size="12"></uni-icons></view></view></view><view class="row-center-stretch" @tap="onTabTitleTap('filter')"><view class="tab-title-left"><view class="tab-title-left-text"><text class="font-size-lg">筛选</text></view><view v-if="currentTabTitleIndex === 'filter'" class="title-line"></view></view></view><!-- #ifdef MP-WEIXIN --><view class="" @tap="onWaterfallSwitchTap"><image class="img-size-base":src="!waterfall ? '/static/product/waterfall.png' : '/static/product/list.png'"mode=""></image></view><!-- #endif --></view></view><view v-if="showTabTitleMask" :style="{height: screenHeight + 'px'}" class="tab-title-mask"@tap="onTabMaskTap"></view><view v-if="showSortOptions"class="bg-color-grey border-bottom-left-radius-xl border-bottom-right-radius-xl padding-lg sort-options-section"><view class="row-start-center sort-option" v-for="(sortOption, sortOptionIndex) of sortOptions":key="sortOptionIndex" @tap="onSortOptionTap(sortOptionIndex)"><uni-icons v-if="sortOptionIndex === currentSortOptionIndex" type="checkmarkempty" :size="20":color="UNI_COLOR_RED"></uni-icons><text class="font-size-lg":class="{'font-weight-bold': sortOptionIndex === currentSortOptionIndex}">{{sortOption.desc}}</text></view></view></view></view><com-product-list :waterfall="waterfall" :products="products"></com-product-list><com-drawer ref="filter-popup" mode="right" :width="toPx('600rpx')"><com-filter class="filter-popup-content" :serviceOptions="serviceOptions" :brandOptions="brandOptions":specificationOptions="specificationOptions" @confirm="onFilterConfirm"></com-filter></com-drawer></view>
</template><script>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-WEIXINonBackPressTap() {uni.navigateBack({delta: 1})},onWaterfallSwitchTap() {this.toggleWaterfall();},// #endifonTabMaskTap() {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));}},}<style lang="scss" scoped>.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 */}
</style>

五、测试与验证

在代码实现完成后，我们需要进行测试与验证来确保功能的正确性。可以使用自动化测试工具或手动测试来验证每个功能点的正确性。例如，点击不同的筛选标签时，是否能够正确切换到相应的筛选选项；点击排序标签时，是否能够正确显示和隐藏排序选项；点击筛选确定按钮时，是否能够正确触发事件处理逻辑等。通过详细的测试与验证，可以确保我们的仿京东淘宝商品列表筛选组件的功能正确且健壮。

六、总结与展望

本文详细介绍了如何使用cc-widget、uni-icons和xg-list组件来仿制京东淘宝的商品列表筛选组件，并实现了一个高效的侧边栏弹框筛选功能。通过需求分析和技术实现的过程，我们可以了解到如何使用Vue.js框架和一些UI组件库来实现复杂的交互功能。同时，我们也进行了测试与验证来确保功能的正确性。在未来的工作中，我们可以进一步优化代码结构和性能，提高用户体验和系统的可扩展性。

 阅读全文下载完整组件代码请关注微信公众号： 前端组件开发

d848d5658a07453c843277846948c608.png

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/208199.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Clion+Ubuntu(WSL)+MySQL8.0开发环境搭建

Clion+Ubuntu(WSL)+MySQL8.0开发环境搭建

1. 下载 MySQL 源码 访问 MySQL 官方网站&#xff08;MySQL :: Download MySQL Community Server&#xff09;并下载 MySQL 8.0 的源码包&#xff08;mysql-boost-8.0.31.tar.gz&#xff09;。 2. 安装编译依赖 1&#xff09;更换镜像源 参考&#xff1a;Linux Ubuntu 修改…
阅读更多...
多线程06 单例模式,阻塞队列以及模拟实现

多线程06 单例模式,阻塞队列以及模拟实现

前言 上篇文章我们讲了wait和notify两个方法的使用.至此,多线程的一些基本操作就已经结束了,今天我们来谈谈多线程的一些简单应用场景. 单例模式 单例模式,顾名思义,只有一个实例的模式,我们有两种实现方式,分别是懒汉式和饿汉式,我们来分别给出代码. 饿汉式(此处的饿表示创建实…
阅读更多...
使用 Go 构建高性能的命令行工具

使用 Go 构建高性能的命令行工具

命令行工具&#xff08;CLI&#xff09;在软件开发中扮演着重要的角色&#xff0c;尤其是在自动化工具、开发工具链和服务器管理等领域。Go 语言以其简洁性和高性能而闻名&#xff0c;非常适合用来创建强大且高效的 CLI 工具。本文将详细介绍如何使用 Go 语言来构建 CLI 应用&a…
阅读更多...
Concurrent Security of Anonymous Credentials Light, Revisited

Concurrent Security of Anonymous Credentials Light, Revisited

目录 摘要引言 摘要 我们重新审视了著名的匿名证书轻&#xff08;ACL&#xff09;方案&#xff08;Baldimtsi和Lysyanskaya&#xff0c;CCS’13&#xff09;的并发安全保证。该方案最初被证明在按顺序执行时是安全的&#xff0c;其并发安全性仍然是一个悬而未决的问题。Benham…
阅读更多...
一致性Hash算法

一致性Hash算法

Hash算法 哈希算法将任意长度的二进制值映射为较短的固定长度的二进制值&#xff0c;这个小的二进制值称为哈希值。哈希值是一段数据唯一且极其紧凑的数值表示形式。 Hash算法在安全加密领域MD5、SHA等加密算法&#xff0c;数据存储和查找的Hash表等方面均有应用。Hash表的数…
阅读更多...
MOS管的静电击穿问题

MOS管的静电击穿问题

MOS管输入电阻很高&#xff0c;为什么一遇到静电就不行了&#xff1f; 静电击穿&#xff1a;由于静电的积累导致电压超过了原本MOS的绝缘能力&#xff0c;导致电流突然增大的现象。 MOS管基础知识了解&#xff1a; G极(gate)—栅极&#xff0c;不用说比较好认 S极(source)—源…
阅读更多...
分享一个国内可用的免费GPT4-AI提问AI绘画网站工具

分享一个国内可用的免费GPT4-AI提问AI绘画网站工具

一、前言 ChatGPT GPT4.0&#xff0c;Midjourney绘画&#xff0c;相信对大家应该不感到陌生吧&#xff1f;简单来说&#xff0c;GPT-4技术比之前的GPT-3.5相对来说更加智能&#xff0c;会根据用户的要求生成多种内容甚至也可以和用户进行创作交流。 然而&#xff0c;GPT-4对普…
阅读更多...
2017年五一杯数学建模A题公交车排班问题解题全过程文档及程序

2017年五一杯数学建模A题公交车排班问题解题全过程文档及程序

2017年五一杯数学建模 A题 公交车排班问题 原题再现 随着徐州市经济的快速发展&#xff0c;公交车系统对于人们的出行扮演着越来越重要的角色。在公交车资源有限的情况下&#xff0c;合理的编排公交车的行车计划成为公交公司亟待解决的问题。以下给出公交车排班问题中的部分名…
阅读更多...
vue+echarts实现依赖关系无向网络拓扑结图节点折叠展开策略

vue+echarts实现依赖关系无向网络拓扑结图节点折叠展开策略

目录 引言 一、设计 1. 树状图&#xff08;不方便呈现节点之间的关系&#xff0c;次要考虑&#xff09; 2. 力引导依赖关系图 二、力引导关系图 三、如何实现节点的Open Or Fold 1. 设计逻辑 节点展开细节 节点收缩细节 代码实现 四、结果呈现 五、完整代码 引言 我…
阅读更多...
重生奇迹MU再生原石

重生奇迹MU再生原石

通过坎特鲁提炼之塔的NPC艾尔菲丝提炼成功就可以可获得再生宝石。 重生奇迹mu里的再生原石的用法&#xff1a; 1、打怪获得再生原石去提炼之塔&#xff08;进入坎特鲁遗址的141188位置的传送台&#xff09;。 2、找到&#xff08;艾儿菲丝&#xff09;把原石提炼成再生宝石。…
阅读更多...
2016年五一杯数学建模C题二孩政策问题解题全过程文档及程序

2016年五一杯数学建模C题二孩政策问题解题全过程文档及程序

2016年五一杯数学建模 C题 二孩政策问题 原题再现 多年来实施的严、紧计划生育政策对控制人口增长起到关键作用。在优生优育政策的指引下&#xff0c;我国人口质量显著提高&#xff0c;但也带来了不利影响&#xff0c;生育率偏低、男女比例失衡、人口老龄化情况严重等问题。2…
阅读更多...
小程序如何进行一键修复

小程序如何进行一键修复

在使用小程序过程中&#xff0c;难免会遇到一些问题&#xff0c;比如程序崩溃、功能异常等等。这时&#xff0c;版本一键修复就显得尤为重要了。下面&#xff0c;我们就来介绍一下小程序如何进行版本一键修复。 一、什么是版本一键修复&#xff1f; 版本一键修复是指在小程序…
阅读更多...
ELK---filebeat日志收集工具

ELK---filebeat日志收集工具

elk---filebeat日志收集工具 filebeat是一个轻量级的日志收集工具&#xff0c;所使用的资源比logstash部署和启动时使用的资源小的多。 filebeat可以在非Java环境收集日志&#xff0c;它可以代替logstash在非Java环境上收集日志。 filebeat无法实现数据的过滤&#xff0c;一般…
阅读更多...
Linux 调试工具：gdb

Linux 调试工具：gdb

调试复习 调试可谓是 “贯穿” 了程序员的一生&#xff0c;调试的重要性&#xff0c;就不再赘述啦&#xff01;如果你还不知道什么是调试&#xff0c;可以看看 Windows 系统的 Visual Studio 是如何调试的&#xff1a;➡️ visual stuudio 使用调试技巧 下载调试软件 gdb yu…
阅读更多...
java学习part29线程通信

java学习part29线程通信

139-多线程-线程间的通信机制与生产者消费者案例_哔哩哔哩_bilibili 1.等待唤醒 类似于golang的channel&#xff0c; 1.1用法 类似于go的wait()&#xff0c; 1.sleep和wait的一个重大区别是&#xff0c;sleep不会让线程失去同步监视器&#xff0c;而wait会释放 2.wait必须tr…
阅读更多...
半监督语义分割综述

半监督语义分割综述

paper link&#xff1a;https://arxiv.org/pdf/2302.09899.pdf 1. Introduction 图像分割是最古老、研究最广泛的计算机视觉 (CV) 问题之一。图像分割是指将图像划分为不同的非重叠区域&#xff0c;并将相应的标签分配给图像中的每个像素&#xff0c;最终获得ROI区域位置及其类…
阅读更多...
【交换排序 简单选择排序 堆排序 归并排序】

【交换排序 简单选择排序 堆排序 归并排序】

文章目录 交换排序简单选择排序堆排序归并排序 交换排序 冒泡排序的算法分析&#xff1a; 冒泡排序最好的时间复杂度是O&#xff08;n&#xff09;冒泡排序最好的时间复杂度是O&#xff08;n平方&#xff09;冒泡排序平均时间复杂度为O&#xff08;n的平方&#xff09;冒泡排…
阅读更多...
shareMouse 使用中遇到的问题

shareMouse 使用中遇到的问题

一、shareMouse 使用中遇到的问题 1、鼠标不能移动到另一个显示器 明明是两个显示器&#xff0c;但是 只显示一个&#xff0c;鼠标也不能移到另一个显示器上 后来&#xff0c; 设置了 wrap mouse pointer around display就好了&#xff0c;虽然还是显示一个显示器&#xff0c…
阅读更多...
【傻瓜级JS-DLL-WINCC-PLC交互】1.C#用windows窗体控件创建.net控件

【傻瓜级JS-DLL-WINCC-PLC交互】1.C#用windows窗体控件创建.net控件

思路 JS-DLL-WINCC-PLC之间进行交互&#xff0c;思路&#xff0c;先用Visual Studio创建一个C#的DLL控件&#xff0c;然后这个控件里面嵌入浏览器组件&#xff0c;实现JS与DLL通信&#xff0c;然后DLL放入到WINCC里面的图形编辑器中&#xff0c;实现DLL与WINCC的通信。然后PLC与…
阅读更多...
【多线程】-- 09 线程同步之三大不安全案例举例

【多线程】-- 09 线程同步之三大不安全案例举例

多线程 6 线程同步 “多个线程操作同一个资源” 处理多线程问题时&#xff0c;多个线程访问同一个对象&#xff0c;并且某些线程还想修改这个对象&#xff0c;这时候就需要线程同步。线程同步其实就是一种等待机制&#xff0c;多个需要同时访问此对象的线程进入这个对象的等…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023