微信小程序商城开发之动态API把商品进行分类（代码）（商品展示小程序源码）

微信小程序商城开发之动态API把商品进行分类（代码）（商品展示小程序源码）

本篇文章给大家带来的内容是关于微信小程序商城开发之动态API把商品进行分类（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

看效果

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

商品分类.gif

开发计划

1、商品分类页面布局

2、调用动态API获取数据并加载

根据商品ID获取商品详情API数据模型

访问：https://100boot-/ 选择微商城案例，如下图所示：

商品分类API.jpg

下方还有详细的数据模型可以查看哦！

classify.wxml

{{item.name}} {{item.name}} 该分类暂无数据 -

classify.wxss

/* pages/classify/classify.wxss */page{ background: #f5f5f5; } /*总体主盒子*/ .container { position: relative; width: 100%; height: 100%; background-color: #fff; color: #939393; } /*左侧栏主盒子*/ .nav_left{ /*设置行内块级元素*/ position: absolute; /* display: inline-block; */ width: 25%; height: 100%; /*主盒子设置背景色为灰色*/ background: #f5f5f5; text-align: center; left: 0; top:0;} /*左侧栏list的item*/ .nav_left .nav_left_items{ height: 40px; line-height: 40px; padding: 6px 0; border-bottom: 1px solid #dedede; font-size: 14px; } /*左侧栏list的item被选中时*/ .nav_left .nav_left_items.active{ /*背景色变成白色*/ background: #fff; color: #f0145a; } /*右侧栏主盒子*/ .nav_right{ /*右侧盒子使用了绝对定位*/ position: absolute; top: 0; right: 0; flex: 1; /*宽度75%，高度占满，并使用百分比布局*/ width: 75%; height: 1000px; padding: 10px; box-sizing: border-box; background: #fff; } /*右侧栏list的item*/ .nav_right .nav_right_items{ /*浮动向左*/ float: left; /*每个item设置宽度是33.33%*/ width: 33.33%; height: 120px; text-align: center; } .nav_right .nav_right_items image{ /*被图片设置宽高*/ width: 60px; height: 60px; margin-top: 15px; } .nav_right .nav_right_items text{ /*给text设成块级元素*/ display: block; margin-top: 15px; font-size: 14px; color: black; /*设置文字溢出部分为...*/ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .nodata_text{ color: black; font-size: 14px; text-align: center; }.left_cate { display: flex; flex-direction: row; /*每个高30px*/ height: 40px; /*垂直居中*/ line-height: 40px; /*再设上下padding增加高度，总高42px*/ padding: 6px 0; /*只设下边线*/ border-bottom: 1px solid #dedede; /*文字14px*/ font-size: 14px; background: #fff; color: #f0145a; } .separate { background-color: #f0145a; width: 10rpx; z-index: 10;}-

classify.js

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。