微信小程序商城开发之动态API实现商品的详情页的代码（下）

微信小程序商城开发之动态API实现商品的详情页的代码（下）

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

看效果

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

加入购物车.gif

开发计划

1、加入购物车悬浮框、商品数量、价格计算、收藏和加入购物车功能开发2、调用加入购物车API加入购物车

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

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

加入购物车和商品收藏API.jpg

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

detail.wxml

加入购物车 立即购买#template模板引用 ￥{{goods.totalMoney}} 销量 {{goods.buyRate}} 件 商品编码：{{goods.goodsId}} 购买数量 确定 -

detail.wxss

#template 模板引用 @import "../template/template.wxss"; /* sku选择 */.dialog__mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; background: rgba(0, 0, 0, 0.7); display: none;}.dialog__container { position: fixed; bottom: 0; width: 100%; background: white; transform: translateY(150%); transition: all 0.4s ease; z-index: 11;}.dialog--show .dialog__container { transform: translateY(0);}.dialog--show .dialog__mask { display: block;}.image-sku { width: 200rpx; height: 200rpx; z-index: 12; position: absolute; left: 20px; top: -30px; border-radius: 20rpx;}.image-close { width: 40rpx; height: 40rpx; position: fixed; right: 20rpx; top: 10rpx;}.column { display: flex; flex-direction: column;}.row { display: flex; flex-direction: row; align-items: center;}.border-line { width: 100%; height: 2rpx; display: inline-block; margin: 30rpx 0rpx; background-color: gainsboro; text-align: center;}.sku-title { position: relative; left: 300rpx; margin: 1rpx;}.sku-price { color: red; position: relative; left: 300rpx; margin: 1rpx;}.row .quantity-position { position: absolute; right: 30rpx; display: flex; justify-content: center; flex-direction: column; }-

detail.js

template模板使用

由于再加上template的源码太长了，大家可以直接-源码使用就好。

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