components/shopping/shoppingitem/shoppingitem.js

@@ -14,13 +14,28 @@ Component({
      * 组件的初始数据
      */
     data: {
-
+        num: 5
     },
 
     /**
      * 组件的方法列表
      */
     methods: {
+        rm() {
+            if (this.data.num == 0) {
+                return
+            } else {
+                this.setData({
+                    num: this.data.num - 1
+                })
+            }
+        },
+        add() {
+
+            this.setData({
+                num: this.data.num + 1
+            })
+        }
 
     }
 })

components/shopping/shoppingitem/shoppingitem.wxml

@@ -9,8 +9,8 @@
         <view class="price">${{price}}</view>
     </view>
     <view class="numberset">
-        <view class="reverse"></view>
+        <view class="reverse" bind:tap="rm">-</view>
-        <view class="num">5</view>
+        <view class="num">{{num}}</view>
-        <view class="add"></view>
+        <view class="add" bind:tap="add">+</view>
     </view>
 </view>

components/shopping/shoppingitem/shoppingitem.wxss

@@ -63,11 +63,13 @@
 }
 
 .reverse {
-    width: 19rpx;
+    width: 23rpx;
-    height: 3rpx;
+    height: 23rpx;
-    background-color: #97DFB4;
+    /* background-color: #97DFB4; */
     margin: 0 auto;
-    margin-top: 25rpx;
+    margin-top: 20rpx;
+    line-height: 23rpx;
+    font-size: 46rpx;
 }
 
 .num {
@@ -79,7 +81,8 @@
 .add {
     width: 23rpx;
     height: 23rpx;
-    background-color: #242424;
+    /* background-color: #242424; */
     margin: 0 auto;
     margin-bottom: 17rpx;
+    line-height: 23rpx;
 }

pages/shopping/shopping.js

@@ -5,7 +5,7 @@ Page({
      * 页面的初始数据
      */
     data: {
-
+        list:[1,1,1]
     },
 
     /**

pages/shopping/shopping.wxml

@@ -1,5 +1,8 @@
 <view class="shopping">
-   <view class="item">
+   <view class="item" wx:for="{{list}}" wx:for-index="j" wx:if = "{{item == 1}}" wx:key="{{j}}">
+      <shopping-item shopname="J`adore - Dior" shopdesc="30支   1.30kg" price="61.78"></shopping-item>
+   </view>
+   <!-- <view class="item">
       <shopping-item shopname="J`adore - Dior" shopdesc="30支   1.30kg" price="61.78"></shopping-item>
    </view>
    <view class="item">
@@ -7,10 +10,7 @@
    </view>
    <view class="item">
       <shopping-item shopname="J`adore - Dior" shopdesc="30支   1.30kg" price="61.78"></shopping-item>
-   </view>
+   </view> -->
-   <view class="item">
-      <shopping-item shopname="J`adore - Dior" shopdesc="30支   1.30kg" price="61.78"></shopping-item>
-   </view>
    <view class="bottom">
       <view class="left">
          <view class="select"></view>

pages/shopping/shopping.wxss

@@ -1,4 +1,7 @@
-    .item {
+.shopping{
+    padding-bottom: 128rpx;
+}
+.item {
         height: 186rpx;
         margin-left: 46rpx;
         margin-top: 59rpx;