當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

shop--10.店铺列表（前端）

發布時間：2025/5/22 HTML 55 豆豆

生活随笔收集整理的這篇文章主要介紹了 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>  <div class="page-group"><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"></div><div class="select-wrap"><select class="select" id="area-search"></select></div><div class="list-div shop-list"></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></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

轉載于:https://www.cnblogs.com/SkyeAngel/p/9026942.html

總結

以上是生活随笔為你收集整理的shop--10.店铺列表（前端）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Node.js：Web模块、文件系统
下一篇： ScalaPB（4）：通用跨系统pro