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

相关文章

PostgreSQL的扩展dict_int应用案例解析

《PostgreSQL的扩展dict_int应用案例解析》dict_int扩展为PostgreSQL提供了专业的整数文本处理能力,特别适合需要精确处理数字内容的搜索场景,本文给大家介绍PostgreS... 目录PostgreSQL的扩展dict_int一、扩展概述二、核心功能三、安装与启用四、字典配置方法

Python中re模块结合正则表达式的实际应用案例

《Python中re模块结合正则表达式的实际应用案例》Python中的re模块是用于处理正则表达式的强大工具,正则表达式是一种用来匹配字符串的模式,它可以在文本中搜索和匹配特定的字符串模式,这篇文章主... 目录前言re模块常用函数一、查看文本中是否包含 A 或 B 字符串二、替换多个关键词为统一格式三、提

Python get()函数用法案例详解

《Pythonget()函数用法案例详解》在Python中,get()是字典(dict)类型的内置方法,用于安全地获取字典中指定键对应的值,它的核心作用是避免因访问不存在的键而引发KeyError错... 目录简介基本语法一、用法二、案例:安全访问未知键三、案例:配置参数默认值简介python是一种高级编

MySQL中的索引结构和分类实战案例详解

《MySQL中的索引结构和分类实战案例详解》本文详解MySQL索引结构与分类,涵盖B树、B+树、哈希及全文索引,分析其原理与优劣势,并结合实战案例探讨创建、管理及优化技巧,助力提升查询性能,感兴趣的朋... 目录一、索引概述1.1 索引的定义与作用1.2 索引的基本原理二、索引结构详解2.1 B树索引2.2

SpringBoot开发中十大常见陷阱深度解析与避坑指南

《SpringBoot开发中十大常见陷阱深度解析与避坑指南》在SpringBoot的开发过程中,即使是经验丰富的开发者也难免会遇到各种棘手的问题,本文将针对SpringBoot开发中十大常见的“坑... 目录引言一、配置总出错?是不是同时用了.properties和.yml?二、换个位置配置就失效?搞清楚加

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

从入门到精通MySQL 数据库索引(实战案例)

《从入门到精通MySQL数据库索引(实战案例)》索引是数据库的目录,提升查询速度,主要类型包括BTree、Hash、全文、空间索引,需根据场景选择,建议用于高频查询、关联字段、排序等,避免重复率高或... 目录一、索引是什么?能干嘛?核心作用:二、索引的 4 种主要类型(附通俗例子)1. BTree 索引(

如何使用Maven创建web目录结构

《如何使用Maven创建web目录结构》:本文主要介绍如何使用Maven创建web目录结构的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录创建web工程第一步第二步第三步第四步第五步第六步第七步总结创建web工程第一步js通过Maven骨架创pytho

Java Web实现类似Excel表格锁定功能实战教程

《JavaWeb实现类似Excel表格锁定功能实战教程》本文将详细介绍通过创建特定div元素并利用CSS布局和JavaScript事件监听来实现类似Excel的锁定行和列效果的方法,感兴趣的朋友跟随... 目录1. 模拟Excel表格锁定功能2. 创建3个div元素实现表格锁定2.1 div元素布局设计2.

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动