联系客服
15985840591

商城常用分类页面实现

分享 未结 0 7
白茶大师
白茶大师 VIP3 2018年07月21日

商城常用分类页面

效果:左边分类随右边滚动切换

演示地址: http://skyshop.deitui.com/index.php?m=category 

image.png

<body class="mui-ios mui-ios-9 mui-ios-9-1">
		<div class="fixtop">
		<form onsubmit="return false;" class="mui-input-row mui-search">
			<input id="search-text" type="search" class="mui-input-clear" placeholder="" data-input-clear="1" data-input-search="1"><span class="mui-icon mui-icon-clear mui-hidden"></span><span class="mui-placeholder"><span class="mui-icon mui-icon-search"></span><span></span></span>
		</form>
	</div>
	
 
	<div class="list-side">
					<div class="list-side-item">手机</div>
					<div class="list-side-item">电脑</div>
					<div class="list-side-item active">电视</div>
					<div class="list-side-item">相机</div>
					<div class="list-side-item">好吃的</div>
					<div class="list-side-item">好喝的</div>
					<div class="list-side-item">好玩的</div>
				
		 
	</div>
	<div class="list-main">
		 					<div class="list-cat-item">
			<a href="/index.php?m=list&amp;catid=63">
				<img class="list-cat-img" src="http://img.deitui.com/?w=600&amp;h=200&amp;text=logo&amp;fontsize=64&amp;textcolor=fff&amp;bgcolor=9FB6CD" onerror="this.src='http://img.deitui.com/?w=600&amp;h=200&amp;text=logo&amp;fontsize=64&amp;textcolor=fff&amp;bgcolor=9FB6CD'">
			</a>
			<div class="list-cat-hd">手机</div>
			<div class="list-child">
								<a href="/index.php?m=list&amp;catid=73" class="list-child-item">
					<img class="list-child-img" src="http://img.deitui.com/?w=50&amp;h=50&amp;text=logo&amp;fontsize=14&amp;textcolor=fff&amp;bgcolor=9FB6CD" onerror="this.src='http://img.deitui.com/?w=50&amp;h=50&amp;text=logo&amp;fontsize=14&amp;textcolor=fff&amp;bgcolor=9FB6CD'">
					<div class="list-child-title">iphone</div>  
				</a>
 								<a href="/index.php?m=list&amp;catid=74" class="list-child-item">
					<img class="list-child-img" src="http://img.deitui.com/?w=50&amp;h=50&amp;text=logo&amp;fontsize=14&amp;textcolor=fff&amp;bgcolor=9FB6CD" onerror="this.src='http://img.deitui.com/?w=50&amp;h=50&amp;text=logo&amp;fontsize=14&amp;textcolor=fff&amp;bgcolor=9FB6CD'">
					<div class="list-child-title">小米</div>  
				</a>
 								<a href="/index.php?m=list&amp;catid=75" class="list-child-item">
					<img class="list-child-img" src="http://img.deitui.com/?w=50&amp;h=50&amp;text=logo&amp;fontsize=14&amp;textcolor=fff&amp;bgcolor=9FB6CD" onerror="this.src='http://img.deitui.com/?w=50&amp;h=50&amp;text=logo&amp;fontsize=14&amp;textcolor=fff&amp;bgcolor=9FB6CD'">
					<div class="list-child-title">华为</div>  
				</a>
 								<a href="/index.php?m=list&amp;catid=76" class="list-child-item">
					<img class="list-child-img" src="http://img.deitui.com/?w=50&amp;h=50&amp;text=logo&amp;fontsize=14&amp;textcolor=fff&amp;bgcolor=9FB6CD" onerror="this.src='http://img.deitui.com/?w=50&amp;h=50&amp;text=logo&amp;fontsize=14&amp;textcolor=fff&amp;bgcolor=9FB6CD'">
					<div class="list-child-title">魅族</div>  
				</a>
 								<a href="/index.php?m=list&amp;catid=77" class="list-child-item">
					<img class="list-child-img" src="http://img.deitui.com/?w=50&amp;h=50&amp;text=logo&amp;fontsize=14&amp;textcolor=fff&amp;bgcolor=9FB6CD" onerror="this.src='http://img.deitui.com/?w=50&amp;h=50&amp;text=logo&amp;fontsize=14&amp;textcolor=fff&amp;bgcolor=9FB6CD'">
					<div class="list-child-title">oppo</div>  
				</a>
 								<a href="/index.php?m=list&amp;catid=78" class="list-child-item">
					<img class="list-child-img" src="http://img.deitui.com/?w=50&amp;h=50&amp;text=logo&amp;fontsize=14&amp;textcolor=fff&amp;bgcolor=9FB6CD" onerror="this.src='http://img.deitui.com/?w=50&amp;h=50&amp;text=logo&amp;fontsize=14&amp;textcolor=fff&amp;bgcolor=9FB6CD'">
					<div class="list-child-title">vivi</div>  
				</a>
 								<a href="/index.php?m=list&amp;catid=79" class="list-child-item">
					<img class="list-child-img" src="http://img.deitui.com/?w=50&amp;h=50&amp;text=logo&amp;fontsize=14&amp;textcolor=fff&amp;bgcolor=9FB6CD" onerror="this.src='http://img.deitui.com/?w=50&amp;h=50&amp;text=logo&amp;fontsize=14&amp;textcolor=fff&amp;bgcolor=9FB6CD'">
					<div class="list-child-title">三星</div>  
				</a>
 								<div class="clearfix"></div>
			</div>
		</div>
						<div class="list-cat-item">
			<a href="/index.php?m=list&amp;catid=64">
				<img class="list-cat-img" src="http://img.deitui.com/?w=600&amp;h=200&amp;text=logo&amp;fontsize=64&amp;textcolor=fff&amp;bgcolor=9FB6CD" onerror="this.src='http://img.deitui.com/?w=600&amp;h=200&amp;text=logo&amp;fontsize=64&amp;textcolor=fff&amp;bgcolor=9FB6CD'">
			</a>
			<div class="list-cat-hd">电脑</div>
			<div class="list-child">
								<div class="clearfix"></div>
			</div>
		</div>
						<div class="list-cat-item">
			<a href="/index.php?m=list&amp;catid=65">
				<img class="list-cat-img" src="http://img.deitui.com/?w=600&amp;h=200&amp;text=logo&amp;fontsize=64&amp;textcolor=fff&amp;bgcolor=9FB6CD" onerror="this.src='http://img.deitui.com/?w=600&amp;h=200&amp;text=logo&amp;fontsize=64&amp;textcolor=fff&amp;bgcolor=9FB6CD'">
			</a>
			<div class="list-cat-hd">电视</div>
			<div class="list-child">
								<div class="clearfix"></div>
			</div>
		</div>
						<div class="list-cat-item">
			<a href="/index.php?m=list&amp;catid=66">
				<img class="list-cat-img" src="http://img.deitui.com/?w=600&amp;h=200&amp;text=logo&amp;fontsize=64&amp;textcolor=fff&amp;bgcolor=9FB6CD" onerror="this.src='http://img.deitui.com/?w=600&amp;h=200&amp;text=logo&amp;fontsize=64&amp;textcolor=fff&amp;bgcolor=9FB6CD'">
			</a>
			<div class="list-cat-hd">相机</div>
			<div class="list-child">
								<div class="clearfix"></div>
			</div>
		</div>
						<div class="list-cat-item">
			<a href="/index.php?m=list&amp;catid=67">
				<img class="list-cat-img" src="http://img.deitui.com/?w=600&amp;h=200&amp;text=logo&amp;fontsize=64&amp;textcolor=fff&amp;bgcolor=9FB6CD" onerror="this.src='http://img.deitui.com/?w=600&amp;h=200&amp;text=logo&amp;fontsize=64&amp;textcolor=fff&amp;bgcolor=9FB6CD'">
			</a>
			<div class="list-cat-hd">好吃的</div>
			<div class="list-child">
								<div class="clearfix"></div>
			</div>
		</div>
						<div class="list-cat-item">
			<a href="/index.php?m=list&amp;catid=68">
				<img class="list-cat-img" src="http://img.deitui.com/?w=600&amp;h=200&amp;text=logo&amp;fontsize=64&amp;textcolor=fff&amp;bgcolor=9FB6CD" onerror="this.src='http://img.deitui.com/?w=600&amp;h=200&amp;text=logo&amp;fontsize=64&amp;textcolor=fff&amp;bgcolor=9FB6CD'">
			</a>
			<div class="list-cat-hd">好喝的</div>
			<div class="list-child">
								<div class="clearfix"></div>
			</div>
		</div>
						<div class="list-cat-item">
			<a href="/index.php?m=list&amp;catid=69">
				<img class="list-cat-img" src="http://img.deitui.com/?w=600&amp;h=200&amp;text=logo&amp;fontsize=64&amp;textcolor=fff&amp;bgcolor=9FB6CD" onerror="this.src='http://img.deitui.com/?w=600&amp;h=200&amp;text=logo&amp;fontsize=64&amp;textcolor=fff&amp;bgcolor=9FB6CD'">
			</a>
			<div class="list-cat-hd">好玩的</div>
			<div class="list-child">
								<a href="/index.php?m=list&amp;catid=80" class="list-child-item">
					<img class="list-child-img" src="http://img.deitui.com/?w=50&amp;h=50&amp;text=logo&amp;fontsize=14&amp;textcolor=fff&amp;bgcolor=9FB6CD" onerror="this.src='http://img.deitui.com/?w=50&amp;h=50&amp;text=logo&amp;fontsize=14&amp;textcolor=fff&amp;bgcolor=9FB6CD'">
					<div class="list-child-title">爬山</div>  
				</a>
 								<a href="/index.php?m=list&amp;catid=81" class="list-child-item">
					<img class="list-child-img" src="http://img.deitui.com/?w=50&amp;h=50&amp;text=logo&amp;fontsize=14&amp;textcolor=fff&amp;bgcolor=9FB6CD" onerror="this.src='http://img.deitui.com/?w=50&amp;h=50&amp;text=logo&amp;fontsize=14&amp;textcolor=fff&amp;bgcolor=9FB6CD'">
					<div class="list-child-title">下海</div>  
				</a>
 								<a href="/index.php?m=list&amp;catid=82" class="list-child-item">
					<img class="list-child-img" src="http://img.deitui.com/?w=50&amp;h=50&amp;text=logo&amp;fontsize=14&amp;textcolor=fff&amp;bgcolor=9FB6CD" onerror="this.src='http://img.deitui.com/?w=50&amp;h=50&amp;text=logo&amp;fontsize=14&amp;textcolor=fff&amp;bgcolor=9FB6CD'">
					<div class="list-child-title">游乐园</div>  
				</a>
 								<a href="/index.php?m=list&amp;catid=83" class="list-child-item">
					<img class="list-child-img" src="http://img.deitui.com/?w=50&amp;h=50&amp;text=logo&amp;fontsize=14&amp;textcolor=fff&amp;bgcolor=9FB6CD" onerror="this.src='http://img.deitui.com/?w=50&amp;h=50&amp;text=logo&amp;fontsize=14&amp;textcolor=fff&amp;bgcolor=9FB6CD'">
					<div class="list-child-title">看电影</div>  
				</a>
 								<div class="clearfix"></div>
			</div>
		</div>
						 
			</div>
	<script src="/themes/skyshop/wap/category/index.js"></script>
	<div style="height:50px;"></div>
 
<div class="mfooter">
	<a href="/" class="item ">
		<i class="iconfont icon-home"></i><br> 首页
	</a>
	<a href="/index.php?m=category" class="item active">
		<i class="iconfont icon-shoplight"></i><br> 分类
	</a>
	 
	<a href="/index.php?m=order_cart" class="item ">
		<span class="cart-num js-cart-num"></span>
		<i class="iconfont icon-cart"></i><br> 购物车
	</a>
	
	<a href="/index.php?m=user" class="item ">
		<i class="iconfont icon-my"></i><br> 我的
	</a>
</div>	
	
</body>
$(function() {
	//头部搜索	
	$(document).on("keyup", "#search-text", function(event) {
		if($(this).val() == '') return false;
		if(event.keyCode == "13") {
			var keyword = $(this).val();
			window.location = "/index.php?m=product&keyword=" + encodeURI(keyword);
			return false;
		}
	})
	//分类滚动

})

var catScroll = {
	wh: $(window).height(),
	eIndex: ".list-side-item",  
	eBoxs: ".list-cat-item", 
	lastY: 0,
	lastIndex: 0,
	top:100,
	init: function() {
		var that=this;
		var $eIndex = $(this.eIndex);
		var $eBoxs = $(that.eBoxs);
		var a = $eIndex.eq(that.lastIndex).addClass("active");
		$(document).on("click", that.eIndex, function(e) {
			$(this).addClass("active").siblings().removeClass("active");
			var st = $eBoxs.eq($(this).index()).offset().top - 100;
			$(window).scrollTop(st);
			that.lastY = st;
			that.lastIndex = $(this).index();
		})

		$(document).on("scroll", function(e) {
			var st = $(this).scrollTop();
			if(st > that.lastY) { /*向上拉*/
				var eBox = $eBoxs.eq(that.lastIndex + 1);
				if(eBox.length == 0) return false;

				if(st + that.top > eBox.offset().top) {
					that.lastY = st;
					$eIndex.eq(that.lastIndex + 1).addClass("active").siblings().removeClass("active");
					that.lastIndex++;
				}

			} else { /*向下拉*/
				var eindex = that.lastIndex - 1;

				if(eindex < 0) return false;
				var eBox = $eBoxs.eq(eindex);
				if(eBox.length == 0) return false;
				var thisBox = $eBoxs.eq(that.lastIndex);

				if(st + that.top+100 < thisBox.offset().top) {
					that.lastY = st;
					$eIndex.eq(eindex).addClass("active").siblings().removeClass("active");
					that.lastIndex = eindex;
				}
			}

		})
	}
}
catScroll.init();
body,.mui-body{
		background-color: #fff;
	}
	.list-side{
		position: fixed;
		left:0px;
		top: 60px;
		bottom: 60px;
		width: 70px;
		border-right: 1px solid #eee;
		text-align: center;
	}
	.list-side-item{
		color: #707070;
		margin-bottom: 10px;
		font-size: 14px;
		display: block;
	}
	.list-side-item.active{
		color: #ff842b;
		border-left: 3px solid #ff842b;
	}
	.list-main{
		margin-left: 80px;
		padding-top: 60px;
	}
	.list-cat-img{
		max-width: 100%;
		padding-right: 5px;
	}
	.list-cat-hd{
		text-align: center;
		padding: 10px 0;
		color: #666;
		font-size: 14px;
		position: relative;
	}
	.list-cat-hd:before{
		display: block;
		width: 20px;
		height: 1px;
		background-color: #e0e0e0;
		position: absolute;
		right: 60%;
		top: 50%;
		content: "-";
		overflow: hidden;
		color: #666;
	}
	.list-cat-hd:after{
		display: block;
		width: 20px;
		height: 1px;
		background-color: #e0e0e0;
		position: absolute;
		left: 60%;
		top: 50%;
		content: "-";
		overflow: hidden;
		color: #666;
	}
	.list-child{
		margin-bottom: 10px;
	}
	.list-child-item{
		float: left;
		display: block;
		width: 33.333%;
		margin-bottom: 10px;
		padding:0 10px;
		box-sizing: border-box;
		font-size: 14px;
		color: #666;
		text-align: center;
	}
	.list-child-img{
		width: 100%;
		display: block;
		margin-bottom: 5px;
	}
	.list-child-title{
		height: 30px;
		line-height: 30px;
		overflow: hidden;
	}
	.fixtop{
		display: block;
		position: fixed;
		top: 0;
		left:0;
		right: 0;
		padding: 10px ;
		height: 50px;
		z-index: 999;
		background-color: #efefef;
	}


回帖
  • 消灭零回复
 

回贴周榜

本周热议
没有相关数据
layui

微信扫码关注 得推网 公众号