【微信小程序】商品多规格的sku组件完整代码

VIP文章小码助力助你前行

已于 2022-07-01 17:22:31 修改

阅读量1.7k

点赞数 2

分类专栏：微信小程序 vue js 文章标签：微信小程序 javascript 前端

于 2022-06-17 10:47:48 首次发布

本文链接：https://blog.csdn.net/weixin_42575720/article/details/125329379

版权

一、效果图：

无库存置灰不可选

二、使用：

页面使用组件：

<!-- 规格 -->
<view class="specification">
    <view class="title">选择规格</view>
    <commodity-sku skuNameArr="{
  {detailData.specList}}" skuInfoArr="{
  {detailData.specInfo}}"
        bind:getResultObj="getResultObj">
    </commodity-sku>
</view>

记得注册组件：

{
  "usingComponents": {
    "commodity-sku": "/components/commodity-sku/commodity-sku"
  }
}

三、完整组件：

commodity-sku.wxml

<!-- sku组件 -->
<view class="container">
  <view class="sku-item" wx:for="{
  {skuNameArr}}" wx:for-item="item" wx:key="index">
    <view class='spec-name'>{
  {item.specName}}</view>
    <view class="spec-right">
      <view wx:for="{
  {item.attrList}}" wx:for-item="subItem" wx:for-index='subIndex