微信小程序微商城（六）：动态API实现新品特卖商品流式布局

梦里梦外; 2022-05-21 04:18 185阅读 0赞

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

上一篇：[微信小程序微商城（五）：动态API实现商品详情页（下）][API]

看效果

![9b235d28329e67807e19d5eeb8172ac4.gif][]

开发计划

1、新品特卖商品列表布局
    2、调用动态API获取数据并加载
    3、点击商品跳转商品详情

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

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

![70][]

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

brand.wxml

<scroll-view scroll-y="true" style="height:{ {scrollH}}px" bindscrolltolower="brandShow">
  <view class="goods" style="width:100%">
    <view class="mg_item">
      <view wx:for="{ {col1}}" wx:key="id">
      <view class="item_info" catchtap="catchTapCategory" data-goodsid="{ {item.id}}">
        <image src="{ {item.imgUrl}}" style="width:100%;height:{ {item.height}}px"></image>
      </view>
            <view class="product-name">
              {
 {item.name}}            </view>
            <view class="product-price-wrap">
              ￥{
 {item.price}}  
              ￥{
 {item.privilegePrice}} 
               {
 {item.discount}}折   
            </view>
      </view>
    </view>
    <view class="mg_item">
      <view wx:for="{ {col2}}" wx:key="id" >
      <view class="item_info" catchtap="catchTapCategory" data-goodsid="{ {item.id}}">
        <image src="{ {item.imgUrl}}" style="width:100%;height:{ {item.height}}px"></image>
      </view>
            <view class="product-name">
              {
 {item.name}}            </view>
            <view class="product-price-wrap">
              ￥{
 {item.price}}  
              ￥{
 {item.privilegePrice}} 
               {
 {item.discount}}折   
            </view>
      </view>
    </view>
  </view></scroll-view>
 
 <view style="display:none">
  <image wx:for="{ {brandGoods}}" wx:key="id" id="{ {item.id}}" src="{ {item.imgUrl}}" bindload="onImageLoad1"></image></view> 
 
  <view class="weui-loadmore" hidden="{ {hidden}}">
    <view class="weui-loading"></view>
    <view class="weui-loadmore__tips">努力加载中</view>
  </view>

brand.wxss

page{  
      height: 100%;  
      background-color: #F3F4F6;
    } 
    /* 单个图片容器的样式 */ .img_item {  
        width: 48.5%;  
        margin: 2px;  
        display: inline-block;  
        vertical-align: top;  
        background-color: #ffffff;  
        font-size: 24rpx;
    }
    .item_info{   
        border-top:5px solid #F3F4F6; 
    }
    .product-name{  
        color: #000;  /* height: 28px; */
        text-align:left;   margin: 0px 5px; 
        margin-bottom: 5px; 
    }
    .product-price-wrap .product-price-new{  
        color: #e80080;  
        margin-left:5px;  
        font-weight:900;
    }
    .product-price-wrap .product-price-old{  
        color: #888;  
        text-decoration: line-through;  
        padding-left: 2px;
    }
    .product-price-wrap .discount{  
        margin-left: 30px;  
        background-color: #000;  
        color: #fff;
    }
    /*  加载更多   */ .weui-loading {  
        margin: 0 5px;  
        width: 20px;  
        height: 20px;  
        display: inline-block;      
        vertical-align: middle;  
        -webkit-animation: weuiLoading 1s steps(12, end) infinite;  
        animation: weuiLoading 1s steps(12, end) infinite;  
        background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;  
        background-size: 100%;
    }
    .weui-loadmore {  
        width: 65%;  
        margin: 1.5em auto;  
        line-height: 1.6em;  
        font-size: 12px;  
        text-align: center;
    }
    .weui-loadmore__tips {  
        display: inline-block;  
        vertical-align: middle;  
        color: #888;
    }

brand.js

备注

微信小程序微商城系列 都是通过https 动态获取数据并展示的，建议从第一篇开始阅读。大家多多支持本系列文章会继续更新下去，谢谢各位！大家在使用过程中有哪些建议可以提出来，我们一起学习哈~~~

微信小程序微商城系列

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

关注我们

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

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

[http_blog.100boot.cn]: http://blog.100boot.cn/
[API]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484602&idx=1&sn=266f52c93555991342a53c54023e1cd6&chksm=fc4df6fbcb3a7fedf6955106d6a334ff261c9eccc4ef21d018e779a05e55a7a385c2dc3e198a&mpshare=1&scene=21&srcid=0629lHl8WErLVb5wLrGgxbzk&key=0858e38169824f6534380e37725cf31f96d30d43b0b9cf1b2e5fe21023cca8d2a17d8cc11c3b719f0995b1f9b6d94a92647ba1120a29b51dfdc6dd9627d38b8de1172ebb7ab60adf3165dfde4fdb9575&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=B/jVtPW4CBO7Y1M2PVvZJTsypbCj7Cq/R1MXoEZenwDn1b3Ke7p4ExqI+bsdxrwD#wechat_redirect
[9b235d28329e67807e19d5eeb8172ac4.gif]: /images/20220521/a090c92116a84189b03e5c19079ea81b.png
[70]: /images/20220521/7d8e6b926f5842dcabcbb927c9d3e179.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
[API 2]: https://mp.weixin.qq.com/s?__biz=MzU2NDMyNDE0Mg==&mid=2247484573&idx=1&sn=532c79a23a34124f12fe18742862a065&chksm=fc4df6dccb3a7fcaf8bfa9e01677ba9e039df1626a4860b6babc2eaed0b441e1bfa6c78b8cac&mpshare=1&scene=21&srcid=06253QOBZClvSa6AWZCUiPHs&key=a4e2496d259028b023ae234f79eb7f7236f147c293aac7232090dbbe47380e30ae9c324096a5118986094382b61eed4321f0390a7def09f11c60edbd8f7f7af6c2207379e9d2ac8a75935bc7a4fd7b62&ascene=0&uin=Mjg2MDM5ODQwMg==&devicetype=iMac%20MacBookPro12,1%20OSX%20OSX%2010.11.3%20build%2815D21%29&version=11020201&lang=zh_CN&pass_ticket=RiQfX7aFv1krSBkA4l9rb5O6TBfs0c0irkk7oYxMb8Kq7w/qrnJYQiMPOsoaemxD#wechat_redirect