shop--10.店铺列表（前端）
生活随笔
收集整理的这篇文章主要介绍了
shop--10.店铺列表（前端）
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
利用SUI Mobile的模板来进行拼装
http://m.sui.taobao.org/components/#searchbar
搜索栏、栅栏和按钮组合
卡片
无限滚动
shoplist.html
<!DOCTYPE html> <html> <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>商店列表</title><meta name="viewport" content="initial-scale=1, maximum-scale=1"><link rel="shortcut icon" href="/favicon.ico"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css"><link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css"><link rel="stylesheet" href="../resources/css/frontend/shoplist.css"> </head> <body> <!-- page集合的容器，里面放多个平行的.page，其他.page作为内联页面由路由控制展示 --> <div class="page-group"><!-- 单个page ,第一个.page默认被展示--><div class="page"><!-- 标题栏 --><header class="bar bar-nav"><a class="button button-link button-nav pull-left" externalhref="index" data-transition="slide-out"><span class="icon icon-left"></span>返回</a><h1 class="title">商店列表</h1></header><!--搜索栏--><div class="bar bar-header-secondary"><div class="searchbar"><a class="searchbar-cancel">取消</a><div class="search-input"><label class="icon icon-search" for="search"></label><input type="search" id='search' placeholder='输入关键字...'/></div></div></div><!-- 工具栏 --><nav class="bar bar-tab"><a class="tab-item external active" href="frontend/index" external><span class="icon icon-home"></span><span class="tab-label">首页</span></a><a class="tab-item external" href="#" id="me"><span class="icon icon-me"></span><span class="tab-label">个人</span></a></nav><!--无限滚动--><div class="content infinite-scroll infinite-scroll-bottom" data-distance="100"><!--店铺列表展示区--><div class="shoplist-button-div" id="shoplist-search-div"><!--<a href="#" class="button">所有货物</a><a href="#" class="button">吃的</a><a href="#" class="button">喝的</a>--></div><!--区域列表展示区 一个select控件--><div class="select-wrap"><select class="select" id="area-search"></select></div><!--店铺列表在此添加 卡片--><div class="list-div shop-list"><!--<div class="card"><div class="card-header">传统火锅店</div><div class="card-content"><div class="list-block media-list"><ul><li class="item-content"><div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" width="44"></div><div class="item-inner"><div class="item-subtitle">标题</div></div></li></ul></div></div><div class="card-footer"><span>2015/01/15</span><span>5 评论</span></div></div>--></div><!-- 加载提示符 --><div class="infinite-scroll-preloader"><div class="preloader"></div></div></div></div><!--侧边栏--><div class="panel-overlay"></div><div class="panel panel-right panel-reveal" id="panel-left-demo"><div class="content-block"><p><a href="/myo2o/frontend/myrecord" class="close-panel">消费记录</a></p><p><a href="/myo2o/frontend/mypoint" class="close-panel">我的积分</a></p><p><a href="/myo2o/frontend/pointrecord" class="close-panel">积分兑换记录</a></p><!-- Click on link with "close-panel" class will close panel --></div></div> </div><script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script> <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script> <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script> <script type='text/javascript' src='../resources/js/frontend/shoplist.js' charset='utf-8'></script> <script type='text/javascript' src='../resources/js/common/commons.js' charset="utf-8"></script> </body> </html>
shoplist.js
$(function() {//无限滚动事件// 加载flagvar loading = false;// 最多可加载的条目，超过此数目，禁止访问后台var maxItems = 999;// 每次加载添加多少条目var pageSize = 10;//获取店铺列表的URLvar listUrl = '/frontend/listshop';//获取店铺类别列表以及区域列表的URLvar searchDivUrl = '/frontend/listshoppageinfo';//页码var pageNum = 1;//从地址栏URL里尝试获取parent shop category Idvar parentId = getQueryString('parentId');var areaId = '';var shopCategoryId = '';var shopName = '';//渲染出店铺类别列表以及区域列表以供搜索getSearchDivData();//预先加载10条店铺信息addItems(pageSize, pageNum);/*** 获取店铺类别列表以及区域列表*/function getSearchDivData(){//如果传入了parentId，则将parentId传入后台，用来获取parentId下的二级店铺列表var url = searchDivUrl + '?' + 'parentId=' + parentId;$.getJSON(url, function(data) {if (data.success) {//获取后台返回的店铺类别列表var shopCategoryList = data.shopCategoryList;var html = '';html += '<a href="#" class="button" data-category-id=""> 全部类别 </a>';//遍历店铺类别列表，拼接处 a 标签集shopCategoryList.map(function(item, index) {html += '<a href="#" class="button" data-category-id='+ item.shopCategoryId+ '>'+ item.shopCategoryName+ '</a>';});//将拼接好的类别标签嵌入前提的html组件里$('#shoplist-search-div').html(html);var selectOptions = '<option value="">全部街道</option>';//获取后台返回的区域列表var areaList = data.areaList;//遍历区域列表，拼接处option标签集areaList.map(function(item, index) {selectOptions += '<option value="'+ item.areaId + '">'+ item.areaName + '</option>';});//将标签集添加到area列表里$('#area-search').html(selectOptions);}});}/*** 获取分页展示的店铺列表信息* @param pageSize* @param pageIndex*/function addItems(pageSize, pageIndex) {//拼接出查询的URL，为空就默认去掉这个条件的限制，有值就代表按这个条件去查询var url = listUrl + '?' + 'pageIndex=' + pageIndex + '&pageSize='+ pageSize + '&parentId=' + parentId + '&areaId=' + areaId+ '&shopCategoryId=' + shopCategoryId + '&shopName=' + shopName;//设定加载符，若还在后台取数据则不能再次访问后台，避免多次重复加载loading = true;//访问后台获取相应查询条件下的店铺列表$.getJSON(url, function(data) {if (data.success) {//获取当前查询条件下的店铺总数maxItems = data.count;var html = '';//遍历店铺列表，拼接处卡片集合data.shopList.map(function(item, index) {html += '' + '<div class="card" data-shop-id="'+ item.shopId + '">' + '<div class="card-header">'+ item.shopName + '</div>'+ '<div class="card-content">'+ '<div class="list-block media-list">' + '<ul>'+ '<li class="item-content">'+ '<div class="item-media">' + '<img src="'+ item.shopImg + '" width="44">' + '</div>'+ '<div class="item-inner">'+ '<div class="item-subtitle">' + item.shopDesc+ '</div>' + '</div>' + '</li>' + '</ul>'+ '</div>' + '</div>' + '<div class="card-footer">'+ '<p class="color-gray">'+ new Date(item.lastEditTime).Format("yyyy-MM-dd")+ '更新</p>' + '<span>点击查看</span>' + '</div>'+ '</div>';});//将卡片集合添加到目录html组件里$('.list-div').append(html);//获取目前为止已显示的卡片总数，包含之前已经加载的var total = $('.list-div .card').length;//若总数达到按照此查询条件列出来的总数一致时，则停止后台的加载if (total >= maxItems) {// 加载完毕，则注销无限加载事件，以防不必要的加载$.detachInfiniteScroll($('.infinite-scroll'));// 删除加载提示符$('.infinite-scroll-preloader').remove();}//否则页码+1，继续load新的店铺pageNum += 1;//加载结束，可以再次加载loading = false;//刷新页面，显示新加载的店铺$.refreshScroller();}});}//下滑屏幕自动进行分页搜索$(document).on('infinite', '.infinite-scroll-bottom', function() {if (loading)return;addItems(pageSize, pageNum);});//点击店铺的卡片进入该店铺的详情页$('.shop-list').on('click', '.card', function(e) {var shopId = e.currentTarget.dataset.shopId;window.location.href = '/frontend/shopdetail?shopId=' + shopId;});//选择新的店铺类别之后，重置页码，清空原先的店铺列表，按照新的类别去查询$('#shoplist-search-div').on('click','.button',function(e) {//如果传递过来的是一个父类下的子类if (parentId) {shopCategoryId = e.target.dataset.categoryId;//若之前已选定了别的category，则移除其选定效果，改成选定新的if ($(e.target).hasClass('button-fill')) {$(e.target).removeClass('button-fill');shopCategoryId = '';} else {$(e.target).addClass('button-fill').siblings().removeClass('button-fill');}//由于查询条件改变，清空店铺列表再进行查询$('.list-div').empty();//重置页码pageNum = 1;addItems(pageSize, pageNum);} else {// 如果传递过来的父类为空，则按照父类查询parentId = e.target.dataset.categoryId;if ($(e.target).hasClass('button-fill')) {$(e.target).removeClass('button-fill');parentId = '';} else {$(e.target).addClass('button-fill').siblings().removeClass('button-fill');}//由于查询条件改变，清空店铺列表再进行查询$('.list-div').empty();//重置页码pageNum = 1;addItems(pageSize, pageNum);parentId = '';}});//需要查询的店铺名字发生变化后，重置页码，清空原先的店铺列表，按照新的名字进行查询$('#search').on('input', function(e) {shopName = e.target.value;$('.list-div').empty();pageNum = 1;addItems(pageSize, pageNum);});//需要查询的区域信息发生变化后，重置页码，清空原先的店铺列表，按照新的名字进行查询$('#area-search').on('change', function() {areaId = $('#area-search').val();$('.list-div').empty();pageNum = 1;addItems(pageSize, pageNum);});//点击后打开右侧栏$('#me').click(function() {$.openPanel('#panel-left-demo');});//初始化页面$.init(); });
shoplist.css
.infinite-scroll-preloader {margin-top: -5px; } .shoplist-button-div {margin: 0 .3rem; } .shoplist-button-div > .button {width: 30%;height: 1.5rem;line-height: 1.5rem;display: inline-block;margin: 1%;overflow: hidden; } .select-wrap {margin: 0 .5rem; } .select {border: 1px solid #0894ec;color: #0894ec;background-color: #efeff4;width: 100%;height: 1.5rem;font-size: .7rem; }
commons.js
function changeVerifyCode(img){img.src = "../Kaptcha?" + Math.floor(Math.random() * 100); }/*** 获取前端url中的name的id值* @param name* @returns {*}*/ function getQueryString(name){var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");var r = window.location.search.substr(1).match(reg);if(r != null){return decodeURIComponent(r[2]);}return ''; }Date.prototype.Format = function(fmt) {var o = {"M+" : this.getMonth() + 1, // 月份"d+" : this.getDate(), // 日"h+" : this.getHours(), // 小时"m+" : this.getMinutes(), // 分"s+" : this.getSeconds(), // 秒"q+" : Math.floor((this.getMonth() + 3) / 3), // 季度"S" : this.getMilliseconds()// 毫秒};if (/(y+)/.test(fmt))fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));for ( var k in o)if (new RegExp("(" + k + ")").test(fmt))fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]): (("00" + o[k]).substr(("" + o[k]).length)));return fmt; }
转载于:https://www.cnblogs.com/SkyeAngel/p/9026942.html
总结
以上是生活随笔为你收集整理的shop--10.店铺列表（前端）的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： Node.js：Web模块、文件系统
- 下一篇： 前端入门之——jquery day9