微信小程序微商城（四）：动态API实现商品详情页（上）

小灰灰 2022-05-22 02:52 261阅读 0赞

上一篇：[微信小程序微商城（三）：电商首页福利专场无限下拉刷新动态API数据实现][API]

IT实战联盟博客：[http://blog.100boot.cn][http_blog.100boot.cn]

看效果

![13e7291861acf6f345952d8f2e9db88a.gif][]

开发计划

1、实现商品详情页面布局（这篇实现3个模块，头部商品图片轮播、商品价格和商品描述、商品详情展示）
    2、根据用户点击不同的商品请求API动态加载数据

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

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

![20180613153236420][]

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

home.js 增加跳转商品详情事件

上一篇还记得我们做了商品点击查看详情的事件采集吗？那么再加上跳转商品详情页功能，如下图所示：

![20180613153246637][]

detail.wxml

<swiper indicator-dots="{ {indicatorDots}}" autoplay="{ {autoplay}}" interval="{ {interval}}" duration="{ {duration}}">
      <block wx:for="{ {goods.imgUrls}}">
        <swiper-item>
          <image src="{ {item}}" data-src="{ {item}}" bindtap="previewImage" mode="widthFix"></image>
        </swiper-item>
      </block></swiper><view><view class="product-name-wrap">
        {
       {goods.title}}  </view>
      <view class="product-price-wrap">
          <view>
            <p class="product-price-new">￥{
       {goods.price}}</p>  
            <p class="product-price-old">原价￥{
       {goods.privilegePrice}}</p> 
          </view>
      </view></view>
    
     <view class="details"> 
      <scroll-view scroll-y="true">
        <text>商品详情</text>
        <block wx:for-items="{ {goods.detailImg}}" wx:key="name">
           <image class="image_detail" src="{ {item}}" mode="widthFix"/> 
        </block>
        <view class="temp"></view>
      </scroll-view>
     </view>

detail.wxss

page {  
        display: flex;  
        flex-direction: column;  
        height: 100%;
    }
    /* 直接设置swiper属性 */ swiper {  
        /* height: 500rpx; */
        height: 750rpx;
    }
    swiper-item image {  
        width: 100%;  
        height: 100%;
    }
    /**商品价格**/ .product-price-wrap{      
        display: flex;  
        justify-content:space-between;/**两边对齐**/
        flex-direction: row;  
        flex-wrap: wrap;  
        margin:5px 5px;   /* border:1rpx solid red;   */ } 
    .product-price-wrap .product-price-new{  
        color: red;  
        font-size: 40rpx;  
        margin: 10rpx;
    }
    .product-price-wrap .product-price-old{  
        color: #888;  
        text-decoration: line-through;  
        padding-left: 5px;  
        font-size: 12px;  
        line-height:30px;  
        font-weight:300;
    }
    .product-name-wrap{  
        margin: 0px 10px;    
        font-size: 14px;    
        color: #404040;
    }
    .details{   
        padding: 0 5px 0 5px; 
    }
    .detail {  
        display: flex;  
        flex-direction: column;  
        margin-top: 15rpx;  
        margin-bottom: 0rpx;
      
    }
    .detail .title {  
        font-size: 40rpx;  
        margin: 10rpx;  
        color: black;  
        text-align: justify;  
        height: 100rpx;
    }
    .detail .price {  
        color: red;  
        font-size: 40rpx;  
        margin: 10rpx;
    }
    .line_flag {  
        width: 80rpx;  
        height: 1rpx;  
        display: inline-block;  
        margin: 20rpx auto;  
        background-color: gainsboro;  
        text-align: center;
    }
    .line {  
        width: 100%;  
        height: 2rpx;  
        display: inline-block;  
        margin: 20rpx 0rpx;  
        background-color: gainsboro;  
        text-align: center;
    }
    .detail-nav {  
        display: flex;  
        flex-direction: row;  
        align-items: center;  
        float: left;  
        background-color: #fff;  
        position: fixed;  
        bottom: 0;  
        right: 0;  
        z-index: 1;  
        width: 100%;  
        height: 100rpx;
    }
    .button-green {  
        background-color: #4caf50; /* Green */ }
    .button-red {  
        background-color: #f44336; /* 红色 */ }
    .button-addCar {  
        background-color: #f44336; /* 红色 */
        width: 100%;
    }
    .image_detail {  
        width: 100%;  /* height: 750rpx; */ }
    .detail-nav image {  
        width: 70rpx;  
        height: 50rpx;  
        margin: 20rpx 40rpx;
    }
    .line_nav {  
        width: 5rpx;  
        height: 100%;  
        background-color: gainsboro;
    }
    /* 占位 */ .temp {  
        height: 100rpx;
    }

detail.js

备注

微信小程序微商城系列 都是通过https 动态获取数据并展示的，建议从第一篇开始阅读。大家多多支持本系列文章会继续更新下去，谢谢各位！

微信小程序微商城系列

[微信小程序微商城：开发者key获取][key]  
[微信小程序微商城（一）：https框架搭建并实现导航功能][https]  
[微信小程序微商城（二）：电商首页轮播、分类导航和新品特卖实现][Link 1]  
[微信小程序微商城（三）：电商首页福利专场无限下拉刷新动态API数据实现][API 1]

**关注我们**

IT实战联盟博客：[http://blog.100boot.cn][http_blog.100boot.cn]

如果需要源码可以关注“IT实战联盟”公\*众\*号并留言（微商城源码，5个字会收到源码下载地址，一定要看源码里面的操作手册会少走很多弯路），也可以加入交流群和作者互撩哦~~~

[API]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484532&idx=1&sn=2fddf4e443288e3fec41393fa751a0df&chksm=fc4df635cb3a7f23c8c846c57a543b15f9aff5f3cbd66a2d0cb40bec236c233f3385cfbc54da&mpshare=1&scene=21&srcid=0613oKpIiyVZLjDtjc9k33BD&key=0ca581e96f9f14296d63c067c75b386d9f979618942c1621ba09bea8121625246be936a3e4e2ab6e82f00a2144cb17ebfa424f5b01e1e5f377b0887995c1117692ee7eb1eb531c4e91afb461f828ff6f&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=eKDMiEWJaAXY4WuSEXVhA8nEUoKtVwIDFEuolXJInpwUfPVC5gNyn2PHMaVIVdvy#wechat_redirect
[http_blog.100boot.cn]: http://blog.100boot.cn/
[13e7291861acf6f345952d8f2e9db88a.gif]: /images/20220522/42e0eab5f7aa43198c0467f5bcce3d5e.png
[20180613153236420]: /images/20220522/a24c677653b54ad4b647e10fd14f8407.png
[20180613153246637]: /images/20220522/be8739734e9b47188e1848fe894c766f.png
[key]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484489&idx=2&sn=fc4d45faecbd7d702298aeee26cb389a&chksm=fc4df608cb3a7f1eda90f46b2119f3f57552f69c0aeac475d3320f6a3e252b1ea664fa7be2e3&mpshare=1&scene=21&srcid=0613CgkG8U8GmYCgMLNwf0SQ&key=0ca581e96f9f14296135cd5c62f3396e5b142b077a4b28dc59f9d2660b1615e4c29e32f353744b14703530eb2c1401ed93b62db580cf8d37021539c994c20528da24c59e7513c166bc48b341bb2f6165&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=eKDMiEWJaAXY4WuSEXVhA8nEUoKtVwIDFEuolXJInpwUfPVC5gNyn2PHMaVIVdvy#wechat_redirect
[https]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484489&idx=1&sn=b30937e849bece0968ea07ac72b83d11&chksm=fc4df608cb3a7f1ea60ab5b51108c080baa1a79c75c8a7231421d85ec07c7c0ef713cc772b84&mpshare=1&scene=21&srcid=0613hky4NypPiIvTYp7yPXEK&key=cb58026704e90da05c9bb8c1e0058f00378cf7005c217c2f2b9fec70ac71b74a51e2000b118aa9b882a0e5a35ca7b536920fa63b700d4c624a71e31c5ddc4925cb70cfe3e5ec46ca9841ffa357610357&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=eKDMiEWJaAXY4WuSEXVhA8nEUoKtVwIDFEuolXJInpwUfPVC5gNyn2PHMaVIVdvy#wechat_redirect
[Link 1]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484498&idx=1&sn=03bd2b638203a9fd3bc5314cf96a0f5a&chksm=fc4df613cb3a7f0557f113ef814d06ca28c395fd5053756eda4811c7df6fa95604f9171fe383&mpshare=1&scene=21&srcid=06136trF43RMxRkzdSpLrSm1&key=28a021edb6a1ada0e2e6b8a9e3d4ed36e9a02977c3ac3d4414ed747e08e5ab6952338ea87fed34f2a5064003302a2773b0652665c21743b43b9943cf819bd90eb830887b0919c2fa5453c04b72910225&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=eKDMiEWJaAXY4WuSEXVhA8nEUoKtVwIDFEuolXJInpwUfPVC5gNyn2PHMaVIVdvy#wechat_redirect
[API 1]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484532&idx=1&sn=2fddf4e443288e3fec41393fa751a0df&chksm=fc4df635cb3a7f23c8c846c57a543b15f9aff5f3cbd66a2d0cb40bec236c233f3385cfbc54da&mpshare=1&scene=21&srcid=0613oKpIiyVZLjDtjc9k33BD&key=abba1b7731e3ee594e57918b9830a98c76a76dc40fdb0b7cbc313afa8e9a71043f6b58c675129778ac8f55a62526dc735b90ef574155ada0253b36c0ac82f89400626cf41e3ed5a6069d75d71447c811&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=eKDMiEWJaAXY4WuSEXVhA8nEUoKtVwIDFEuolXJInpwUfPVC5gNyn2PHMaVIVdvy#wechat_redirect