通过微信开发者工具 商城模板 创建新小程序

mini-program/components/goods-list/index.js

@@ -0,0 +1,62 @@
+Component({
+  externalClasses: ['wr-class'],
+
+  properties: {
+    goodsList: {
+      type: Array,
+      value: [],
+    },
+    id: {
+      type: String,
+      value: '',
+      observer: (id) => {
+        this.genIndependentID(id);
+      },
+    },
+    thresholds: {
+      type: Array,
+      value: [],
+    },
+  },
+
+  data: {
+    independentID: '',
+  },
+
+  lifetimes: {
+    ready() {
+      this.init();
+    },
+  },
+
+  methods: {
+    onClickGoods(e) {
+      const { index } = e.currentTarget.dataset;
+      this.triggerEvent('click', { ...e.detail, index });
+    },
+
+    onAddCart(e) {
+      const { index } = e.currentTarget.dataset;
+      this.triggerEvent('addcart', { ...e.detail, index });
+    },
+
+    onClickGoodsThumb(e) {
+      const { index } = e.currentTarget.dataset;
+      this.triggerEvent('thumb', { ...e.detail, index });
+    },
+
+    init() {
+      this.genIndependentID(this.id || '');
+    },
+
+    genIndependentID(id) {
+      if (id) {
+        this.setData({ independentID: id });
+      } else {
+        this.setData({
+          independentID: `goods-list-${~~(Math.random() * 10 ** 8)}`,
+        });
+      }
+    },
+  },
+});

mini-program/components/goods-list/index.json

@@ -0,0 +1,6 @@
+{
+    "component": true,
+    "usingComponents": {
+        "goods-card": "/components/goods-card/index"
+    }
+}

mini-program/components/goods-list/index.wxml

@@ -0,0 +1,16 @@
+<view class="goods-list-wrap wr-class" id="{{independentID}}">
+	<block wx:for="{{goodsList}}" wx:for-item="item" wx:key="index">
+		<goods-card
+		  id="{{independentID}}-gd-{{index}}"
+		  data="{{item}}"
+		  currency="{{item.currency || '¥'}}"
+		  thresholds="{{thresholds}}"
+		  class="goods-card-inside"
+		  data-index="{{index}}"
+		  bind:thumb="onClickGoodsThumb"
+		  bind:click="onClickGoods"
+		  bind:add-cart="onAddCart"
+		/>
+	</block>
+</view>
+

mini-program/components/goods-list/index.wxss

@@ -0,0 +1,7 @@
+.goods-list-wrap {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  padding: 0;
+  background: #fff;
+}