仿“拼多多”分类搜索业务实现

一、页面展示

二、页面实现主要技术和难点

分类页面采用大小两级分类，通过两次Ajax请求实现，比较难实现的可能是根据获取到的一级列表，再发送次请求，以一级列表为参数请求获取二级列表，以及点击实现页面显示效果。
实现思路：在请求获取一级分类时，声明一个数组保存一级分类，同时声明二级列表元素，以便之后请求到二级分类后直接挂载。

三、关键代码讲解

分类页面实现完整javascript代码

var second = new Array(); //定义一个数组，存储一级分类的名字
var second_con = new Array(); //定义一个数组存储二级列表的名字
var second_number = 0;
var htmlContent2 = "";
// 商品分类页面实现
var classification = {
	version: "v1.0",
	length: 0,
	getFirstTitle: function() {
		//获取一级分类类别
		$.ajax({
			url: "http://39.98.158.247:8040/category/get/first",
			success: function(data) {
				let htmlContent = "";
				htmlContent2="";
				classification.length = data.data.length;
				for (var i = 0; i < data.data.length; i++) {
					second[i] = data.data[i].category_name;
					second_content = data.data[i].cate
					htmlContent +=
						`<span class="menu">
					       <a  οnclick="toView('${i}_${i}')">${data.data[i].category_name}</a>
				        </span>`;
					htmlContent2 +=
						`<div id="${i}_${i}" class="second">
					    <p >${data.data[i].category_name}</p>
						<div class="${i}" id="content">
						</div>
					</div>`
					}
				$(".first-title").html(htmlContent);
				$(".second-title").html(htmlContent2);
				getSecond.getSecondTitle();

			},
			error: function() {
				console.log("request error");
			}
		})
	},
}
//定义点击一级分类后二级分类展示样式
function toView(id) {
	for (var i = 0; i < classification.length; i++) {
		document.getElementById(i + "_" + i).style.display = "none";
	}
	document.getElementById(id).style.display = "block";

}
//请求后端获取二级列表
let getSecond = {
	version: 'v1.0',
	author: '',
	getSecondTitle: function() {
		for (var i = 0; i < second.length; i++) {
			$.ajax({
				type: "GET",
				async: false,
				url: "http://39.98.158.247:8040/category/get/child",
				data: {
					name: second[i]
				},
				success: function(data) {
					let htmlContent1 = "";
					for (var j = 0; j < data.data.length; j++) {
						htmlContent1 +=
							`  <div class="second-content">
									<img id="${j+second_number}" src="${data.data[j].category_img}"/ > 
									<p>${data.data[j].category_name}</p>
							   </div>
							`;

						second_con.push(`${data.data[j].category_name}`);
					}
					$("." + i).html(htmlContent1);
					//点击二级分类获取商品列表
					for (var m = 0; m < data.data.length; m++) {
						let number = m + second_number;
						$("#" + number).click(function() {
							console.log(this.id);
							$.ajax({
								url: "http://39.98.158.247:8040/item/category",
								async: false,
								data: {
									category: second_con[this.id]
								},
								success: function(data) {
										console.log(data);
										window.open("second-title-item.html", "_blank");
										localStorage.dataset = JSON.stringify(data);
								},
								error: function() {
									console.log("request error")
								}
							})

						})
					}
					second_number += data.data.length;
				},
				error: function() {
					console.log("request error");
				}
			})
		}
	}
}

window.onload = function() {
	console.log(userId);
	getBottomNav.getBottomNavInfo();
	classification.getFirstTitle();
	//记录用户在分类页的停留时长，以便后期分析
	user.GetPage("分类页",userId);
}

分类页面样式实现

//定义点击一级分类后二级分类展示样式
//设置被点击的一级分类下二级分类显示，其他二级分类隐藏
//classification.length即为一级分类数组的长度即一级分类的个数
function toView(id) {
	for (var i = 0; i < classification.length; i++) {
		document.getElementById(i + "_" + i).style.display = "none";
	}
	document.getElementById(id).style.display = "block";
}

分类页面样式实现

/* 一级分类 */
.menu>a{
	height:60px;
	width:100%;
	background-color: #f6f6fa;
	display:flex;
	justify-content: center;
	align-items: center;
	font-size:15px;
	color:#000000;
}
.menu>a:hover{
	border-left: red solid 4px;
	color:red;
	background-color: white;
}

.menu>a:hover{
	border-left: red solid 4px;
	color:red;
	background-color: white;
}
/* 二级分类 */
.second{
	width:100%;
	border-bottom: 0 solid #e4e4e4;
}

.second>p{
	font-size:16px;
	color:#d32111;
	margin-left: 3px;
	margin-top: 3px;
}

#content{
	width:100%;
	display:flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	background-color: white;
	height: 100%;
}
.second-content{
	width:70px;
	margin: 5px;
	
}

.second-content>img{
	height:70px;
	width:70px;
	
}

.second-content>p{
	color:#000000;
	text-align: center;
}

四、源码资源

源码资源：源码地址
下单购买业务实现：详见下单购买业务实现