购物车

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="num">5</view>
-        <view class="add"></view>
+        <view class="reverse" bind:tap="rm">-</view>
+        <view class="num">{{num}}</view>
+        <view class="add" bind:tap="add">+</view>
     </view>
 </view>

components/shopping/shoppingitem/shoppingitem.wxss

@@ -63,11 +63,13 @@
 }
 
 .reverse {
-    width: 19rpx;
-    height: 3rpx;
-    background-color: #97DFB4;
+    width: 23rpx;
+    height: 23rpx;
+    /* 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;
 }