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>

懂Html就能开发App,博文持续更新,博主QQ:260737830!

这篇关于WEB开发者之混合开发APP(九), 商城案例--商城分类页(products.html)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/211409

相关文章

如何解决idea的Module:‘:app‘platform‘android-32‘not found.问题

《如何解决idea的Module:‘:app‘platform‘android-32‘notfound.问题》:本文主要介绍如何解决idea的Module:‘:app‘platform‘andr... 目录idea的Module:‘:app‘pwww.chinasem.cnlatform‘android-32

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

使用Python开发一个带EPUB转换功能的Markdown编辑器

《使用Python开发一个带EPUB转换功能的Markdown编辑器》Markdown因其简单易用和强大的格式支持,成为了写作者、开发者及内容创作者的首选格式,本文将通过Python开发一个Markd... 目录应用概览代码结构与核心组件1. 初始化与布局 (__init__)2. 工具栏 (setup_t

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》:本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子:使用 Blob

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法(推荐)二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript

Python中使用正则表达式精准匹配IP地址的案例

《Python中使用正则表达式精准匹配IP地址的案例》Python的正则表达式(re模块)是完成这个任务的利器,但你知道怎么写才能准确匹配各种合法的IP地址吗,今天我们就来详细探讨这个问题,感兴趣的朋... 目录为什么需要IP正则表达式?IP地址的基本结构基础正则表达式写法精确匹配0-255的数字验证IP地

MySQL高级查询之JOIN、子查询、窗口函数实际案例

《MySQL高级查询之JOIN、子查询、窗口函数实际案例》:本文主要介绍MySQL高级查询之JOIN、子查询、窗口函数实际案例的相关资料,JOIN用于多表关联查询,子查询用于数据筛选和过滤,窗口函... 目录前言1. JOIN(连接查询)1.1 内连接(INNER JOIN)1.2 左连接(LEFT JOI

Spring Shell 命令行实现交互式Shell应用开发

《SpringShell命令行实现交互式Shell应用开发》本文主要介绍了SpringShell命令行实现交互式Shell应用开发,能够帮助开发者快速构建功能丰富的命令行应用程序,具有一定的参考价... 目录引言一、Spring Shell概述二、创建命令类三、命令参数处理四、命令分组与帮助系统五、自定义S

Python通过模块化开发优化代码的技巧分享

《Python通过模块化开发优化代码的技巧分享》模块化开发就是把代码拆成一个个“零件”,该封装封装,该拆分拆分,下面小编就来和大家简单聊聊python如何用模块化开发进行代码优化吧... 目录什么是模块化开发如何拆分代码改进版:拆分成模块让模块更强大:使用 __init__.py你一定会遇到的问题模www.