微信小程序商城项目中商品属性分类的实现（商城类小程序服务类目）

微信小程序商城项目中商品属性分类的实现（商城类小程序服务类目）

这篇文章主要为大家详细介绍了微信小程序商城项目之商品属性值联动选择,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

续上一篇的文章：微信小程序之购物数量加减

所提及的购物数量的加减，现在说说商品属性值联动选择。

为了让同学们有个直观的了解，到电商网截了一个图片，就是红圈所示的部分

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

现在就为大家介绍这个小组件，在小程序中，该如何去写下图为本项目的图：

wxml：

商品属性值联动选择 {{attrValueObj.attrKey}} {{value}} 确定 -

wxss：

.title { padding: 10rpx 20rpx; margin: 10rpx 0; border-left: 4rpx solid #ccc; } /*全部属性的主盒子*/ .commodity_attr_list { background: #fff; padding: 0 20rpx; font-size: 26rpx; overflow: hidden; width: 100%; } /*每组属性的主盒子*/ .attr_box { width: 100%; overflow: hidden; border-bottom: 1rpx solid #ececec; } /*属性名*/ .attr_name { width: 20%; float: left; padding: 15rpx 0; } /*属性值*/ .attr_value_box { width: 80%; float: left; padding: 15rpx 0; overflow: hidden; } /*每个属性值*/ .attr_value { float: left; padding: 0 10rpx; margin: 0 10rpx; border: 1rpx solid #ececec; } /*每个属性选中的当前样式*/ .attr_value_active { background: #FFCC00; border-radius: 10rpx; color: #fff; padding: 0 10rpx; } /*禁用属性*/ .attr_value_disabled { color: #ccc; } /*button*/ .btn-area { margin: 1.17647059em 15px 0.3em; } .btn { margin-top: 15px; background-color:#FFCC00; color: #fff; } .btn:first-child { margin-top: 0; }-

js：

数据部分，一般情况都是访问接口获取数据的，这里并没有使用网络访问，为了简化demo，直接把一组数据放在data对象中。

运行效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

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