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

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

图片

图片

一、引言

随着电子商务的快速发展，用户体验成为了竞争的关键因素。在众多的电商网站中，如京东和淘宝，商品列表筛选功能为用户提供了便捷的途径来找到心仪的商品。本文将详细介绍如何使用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.mzph.cn/news/191226.shtml

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

相关文章

使用JSP+Servlet+MySQL实现登录注册功能

使用JSP+Servlet+MySQL实现登录注册功能

✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a; Java从入门到精通 ✨特色专栏&#xf…
阅读更多...
【电路笔记】-并联电阻

【电路笔记】-并联电阻

并联电阻 文章目录 并联电阻1、概述2、并联电阻示例13、并联电阻示例24、并联电阻电路中的电流5、并联电阻器示例36、总结 当电阻器的两个端子分别连接到另一个或多个电阻器的每个端子时&#xff0c;电阻器被称为并联连接在一起。 1、概述 与之前的串联电阻电路不同&#xff0…
阅读更多...
神经网络 模型表示2

神经网络 模型表示2

神经网络 模型表示2 使用向量化的方法会使得计算更为简便。以上面的神经网络为例&#xff0c;试着计算第二层的值&#xff1a; 我们令 z ( 2 ) θ ( 1 ) x {{z}^{\left( 2 \right)}}{{\theta }^{\left( 1 \right)}}x z(2)θ(1)x&#xff0c;则 a ( 2 ) g ( z ( 2 ) ) {{a}…
阅读更多...
动态规划 | 打家劫舍1、2、3

动态规划 | 打家劫舍1、2、3

198. 打家劫舍 https://leetcode.cn/problems/house-robber/description/ dp[i] 表示 考虑到下标为 i &#xff08;包括i&#xff09;的房子&#xff0c;可以偷到的最大金额。 dp[i] 有两个状态&#xff0c;分别是 偷 和 不偷。 偷&#xff0c;则需要考虑前 i-2 天的最大金额…
阅读更多...
Linux常见指令大全及周边知识：让你的命令行变得更加强大

Linux常见指令大全及周边知识：让你的命令行变得更加强大

文章目录 目录 文章目录 前言 一&#xff0c;Linux操作系统是啥&#xff1f; 二&#xff0c;Linux操作系统具有以下特点 三&#xff0c;指令的学习 1&#xff0c;指令是什么&#xff1f; 2&#xff0c;ls 指令及其常用的衍生指令&#xff1a; 周边知识&#xff1a; ls…
阅读更多...
Selenium page object模式Python

Selenium page object模式Python

目录 概述 优点 示例 项目结构&#xff1a; 基础页面类BasePage 业务页面类BaiduHomePage 测试类test_baidu&#xff1a; 文件工具类file_util 运行日志&#xff1a; 测试结果&#xff1a; 概述 在web应用程序的UI中&#xff0c;有一些区域可以与测试交互。页面对象…
阅读更多...
【虚拟机】Docker基础 【二】

【虚拟机】Docker基础 【二】

2.2.数据卷 容器是隔离环境&#xff0c;容器内程序的文件、配置、运行时产生的容器都在容器内部&#xff0c;我们要读写容器内的文件非常不方便。大家思考几个问题&#xff1a; 如果要升级MySQL版本&#xff0c;需要销毁旧容器&#xff0c;那么数据岂不是跟着被销毁了&#x…
阅读更多...
微信小程序实现打分效果代码整理

微信小程序实现打分效果代码整理

一、微信小程序点击对应点击高亮 js代码 Page({data: {list: [1, 2, 3, 4, 5],active: 0},itemClickOne(e){var nume.currentTarget.dataset.value;this.setData({active:num});}, }) wxml代码 <view class"list"><view class"item {{itemactive?…
阅读更多...
IDC MarketScape2023年分布式数据库报告：OceanBase位列“领导者”类别，产品能力突出

IDC MarketScape2023年分布式数据库报告：OceanBase位列“领导者”类别，产品能力突出

12 月 1 日&#xff0c;全球领先的IT市场研究和咨询公司 IDC 发布《IDC MarketScape:中国分布式关系型数据库2023年厂商评估》&#xff08;Document number:# CHC50734323&#xff09;。报告认为&#xff0c;头部厂商的优势正在扩大&#xff0c;OceanBase 位列“领导者”类别。…
阅读更多...
C#语言高阶开发

C#语言高阶开发

目录 数据结构 集合 动态数组ArrayList 习题&#xff1a;声明一个Monster类&#xff0c;有一个Attack方法,用一个ArrayList去封装Monster的对象,装10个&#xff0c;遍历monster的list让他们释放攻击方法 哈希表HashTable 创建一个武器类&#xff0c;有一个属性叫做id,每个…
阅读更多...
【数据中台】开源项目（3）-Linkis

【数据中台】开源项目（3）-Linkis

关于 Linkis Linkis 在上层应用程序和底层引擎之间构建了一层计算中间件。通过使用Linkis 提供的REST/WebSocket/JDBC 等标准接口&#xff0c;上层应用可以方便地连接访问MySQL/Spark/Hive/Presto/Flink 等底层引擎&#xff0c;同时实现统一变量、脚本、用户定义函数和资源文件…
阅读更多...
web:very_easy_sql（sql、ssrf、gopher协议sql注入）

web:very_easy_sql（sql、ssrf、gopher协议sql注入）

题目 页面显示如下 显示不是内部用户&#xff0c;无法识别信息 查看源码&#xff0c;找到一个use.php 访问之后显示如下 随便输入了一个&#xff0c;发现url有参数显示 试一下靶机的网址&#xff0c;返回nonono 联系之前原始页面写的“不是内网用户&#xff0c;无法别识身份”…
阅读更多...
【PTA-C语言】实验三-循环结构I

【PTA-C语言】实验三-循环结构I

如果代码存在问题&#xff0c;麻烦大家指正 ~ ~有帮助麻烦点个赞 ~ ~ 实验三-循环结构I 7-1 求交错序列前N项和 &#xff08;分数 15&#xff09;7-2 寻找250&#xff08;分数 15&#xff09;7-3 最大公约数和最小公倍数&#xff08;分数 15&#xff09;7-4 统计字符&#xff0…
阅读更多...
Redis 发布订阅机制深入探索

Redis 发布订阅机制深入探索

Redis 的发布订阅&#xff08;pub/sub&#xff09;机制是一种消息传递模式&#xff0c;允许消息的发送者&#xff08;发布者&#xff09;和消息的接收者&#xff08;订阅者&#xff09;通过一个中介层&#xff08;频道&#xff09;进行通信&#xff0c;而无需彼此直接交互。以下…
阅读更多...
231202 刷题日报

231202 刷题日报

周四周五&#xff0c;边值班边扯皮&#xff0c;没有刷题。。 今天主要是做了: 1. 稀疏矩阵压缩&#xff0c;十字链表法 2. 快速排序 3.349. 两个数组的交集​​​​​ 4. 174. 地下城游戏 要注意溢出问题&#xff01;
阅读更多...
外包搞了6年，技术退步明显......

外包搞了6年，技术退步明显......

先说情况&#xff0c;大专毕业&#xff0c;18年通过校招进入湖南某软件公司&#xff0c;干了接近6年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试&#xf…
阅读更多...
vue项目报错及解决npm run build:prod打包错误

vue项目报错及解决npm run build:prod打包错误

vue项目报错及解决npm run build:prod打包错误 执行dev环境时加载失败了该变量&#xff0c;在package.json文件中 删掉 解决方法&#xff1a; 打包成功&#xff1a;
阅读更多...
使用 OpenFunction 在任何基础设施上运行 Serverless 工作负载

使用 OpenFunction 在任何基础设施上运行 Serverless 工作负载

作者&#xff1a; 霍秉杰&#xff1a;KubeSphere 可观测性、边缘计算和 Serverless 团队负责人&#xff0c;Fluent Operator 和 OpenFunction 项目的创始人&#xff0c;还是多个可观测性开源项目包括 Kube-Events、Notification Manager 等的作者&#xff0c;热爱云原生技术&am…
阅读更多...
Hdoop学习笔记（HDP）-Part.16 安装HBase

Hdoop学习笔记（HDP）-Part.16 安装HBase

目录 Part.01 关于HDP Part.02 核心组件原理 Part.03 资源规划 Part.04 基础环境配置 Part.05 Yum源配置 Part.06 安装OracleJDK Part.07 安装MySQL Part.08 部署Ambari集群 Part.09 安装OpenLDAP Part.10 创建集群 Part.11 安装Kerberos Part.12 安装HDFS Part.13 安装Ranger …
阅读更多...
MathType 7.5.2中文版软件使用期到了怎么办？

MathType 7.5.2中文版软件使用期到了怎么办？

MathType 7.5.2中文版作为一款专业的公式编辑器&#xff0c;MathType受到很多人的青睐&#xff0c;它可以将编辑好的公式保存成多种图片格式或透明图片模式&#xff0c;可以很方便的添加或移除符号、表达式等模板&#xff08;只需要简单地用鼠标拖进拖出即可)&#xff0c;也可以…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023