WEB开发者之混合开发APP（九），商城案例--商城分类页(products.html)

本文主要是介绍WEB开发者之混合开发APP（九），商城案例--商城分类页(products.html)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

由商城首页shop.html，进入商城分类页products.html的方法，已经在上一篇博文中说过，核心代码如下：

//获取商品分类id
var id = this.getAttribute("data-id");//直接打开产品分类页面
mui.openWindow({url:'products.html',id:'products.html',extras:{pid:id}
});

商城分类效果图：

products.html的核心代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><!-- 部分内容省略 --></head><body class="baisd"><!-- 主界面菜单同时移动 --><!-- 侧滑导航根容器 --><div class="box"><!-- 主页面标题 --><header class="mui-bar mui-bar-nav header_w header_q"><a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left jiant"></a><span class="mui-pull-right sousuoab sousuoab2"><a data-href="searchproduct.html" id="sousuo"><i class="iconfont icon-sousuo sousuo"></i></a></span></header><div class="height44"></div><div class="height22"></div><div class="container remai  "><div class="swiper-container xiaodian fasten"><div class="swiper-wrapper row shuxian2" id="clist"></div><!-- Add Arrows --></div></div><!-- Initialize Swiper --><!-- 主页面内容容器 --><ul class="mui-table-view mui-grid-view mui-media22" id="ul1"></ul></div></div>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/config.js"></script>
<script type="text/javascript" charset="utf-8">var endflag = "0"; //点击订单状态时，页面加载数据是否结束标识. 1,结束；0，未结束。var detailPage = null; //详情页mui.init();//mui初始化mui.plusReady(function(){endflag = "0";var self = plus.webview.currentWebview();  //获取当前页面webviewvar pid = self.pid == null ? "" : self.pid;//获取传递给当前页面的参数pid,结合文章最上边的调用代码var keyword = self.keyword == null ? "" : self.keyword;//积分商城产品分类列表getClassification(pid,keyword);//预加载产品详情页面if(!detailPage){detailPage = mui.preload({url:'productdetail.html',id:'productdetail.html'});}//点击回到顶部document.querySelector('header').addEventListener('tap',function () {window.scroll(0, 0);});console.log("products.html加载完毕");});//bind:搜索功能document.getElementById("sousuo").addEventListener('tap',function(){var href = this.getAttribute("data-href");mui.openWindow({url:href,id:href,extras:{page:'products.html'}});});//bind:产品的点击事件$("#ul1").on('tap','a',function(){//获取产品idvar id = this.getAttribute("data-id");//触发详情页自定义事件mui.fire(detailPage,'productInfo',{id:id});//打开详情页面mui.openWindow({id:"productdetail.html"});});//func:积分商城产品分类列表function getClassification(ids,keywords){mui.post(shopClassURL,{},function(data){if(data.success){var div = '';//放入产品分类列表$.each(data.data,function(i,v){if(ids == v.id){if(i==data.data.length-1){div += '<div class="swiper-slide swiper-slide2 change"><a data-id="'+v.id+'">'+v.name+'</a></div>';}else{div += '<div class="swiper-slide swiper-slide2 change"><a data-id="'+v.id+'">'+v.name+'</a><span></span></div>';}}else{if(i==data.data.length-1){div += '<div class="swiper-slide swiper-slide2"><a data-id="'+v.id+'">'+v.name+'</a></div>';}else{div += '<div class="swiper-slide swiper-slide2"><a data-id="'+v.id+'">'+v.name+'</a><span></span></div>';}}});$("#clist").append(div);search(ids,keywords);var swiper = new Swiper('.remai .swiper-container', {pagination: '.remai .swiper-pagination',slidesPerView: 5,paginationClickable: true,spaceBetween: 00,calculateHeight: true,autoResize: true,resizeReInit: true});//绑定产品分类的点击事件mui("#clist").on('tap','a',function(){if("1" == endflag){endflag = "0";//高亮控制$("#clist div").removeClass("change");$(this).parent().addClass("change");//执行查询var id = this.getAttribute("data-id");search(id,"");}});}},'json');}//func:根据产品分类ID查询产品列表function search(ids,keywords){//获取对应分类的商品列表mui.post(shopClassProductURL,{"pid":ids,"keyword":keywords},function(data){$("#ul1").empty();if(data.success){console.log("商城产品列表输出数据:"+JSON.stringify(data));$.each(data.data,function(i,v){var inventory = v.inventory; //库存var sales_num = v.sales_num; //销量var sy = parseInt(inventory) - parseInt(sales_num);var li = '<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-media2 mui-media2s">'xxxx</li>';$("#ul1").append(li);});endflag = "1";}},'json');}
</script></body>
</html>