improvement: 购物车动画

src/pages/auth.wpy

@@ -45,7 +45,7 @@
 {
     navigationBarTitleText: '微信授权',
     usingComponents: {
-      'van-button': '../components/vant/button/index'
+      'van-button': '../components/vant/button/index',
     }
 }
 </config>

src/pages/index.wpy

@@ -10,7 +10,7 @@
     width: 100%;
     height: 100%;
     position: absolute;
-    z-index: 2;
+    z-index: 0;
     background-color:rgba(0, 0, 0, 0.7);
   }
   .userInfo{
@@ -46,6 +46,17 @@
     float: right;
     font-size: 12px;
   }
+  .shopcar {
+    float: right;
+    margin-right:20px;
+    width:36px;
+    height:40px;
+    position: relative;
+  }
+  .van-info{position:absolute;z-index:3;top:-8px;right:0;min-width:16px;padding:0 3px;font-family:PingFang SC,Helvetica Neue,Arial,sans-serif;font-size:12px;font-weight:500;line-height:14px;color:#fff;text-align:center;white-space:nowrap;background-color:#f44;border:1px solid #fff;border-radius:16px;-webkit-transform:translateX(50%);transform:translateX(50%);box-sizing:border-box;-webkit-transform-origin:100%;transform-origin:100%}
+  .shopcar.bigshop {
+    transform: scale(1.2,1.2);
+  }
   .imgwrap{
     margin:8px 0;
   }
@@ -168,6 +179,10 @@
         <view>中奖概率1/3000</view>
       </view>
       <view class="rightcont">
+        <view class="shopcar" id="shopcar">
+          <van-icon name="shopping-cart-o" size="{{bigshop?'4em':'2.5em'}}" />
+          <view class="van-info">{{carinfo}}</view>
+        </view>
         <swiper class="list-wrapper" vertical="true" circular="true" display-multiple-items="2" autoplay="true" interval="1500">
           <swiper-item  wx:for="{{adlist}}" wx:key="index" catchtouchmove="forbidMove">
             <view class="imgwrap">
@@ -193,6 +208,7 @@
             bindtap="toViewPage"
             bindtouchstart="touchStart"
             bindtouchend="touchEnd"
+            bindtouchmove="touchMove"
             class="list-item {{item.select?'delete':''}} {{tools.computClass(current,index,list.length)}}"
           >
             <image src="/static/images/test2.png"  mode="widthFix"></image>
@@ -225,6 +241,10 @@
       userInfo: {},
       swiperItem:3,
       videoList:[],
+      shopcarPosition: null,
+      bigshop: false,
+      carinfo:0,
+      shopcarlist:[],
     },
 
     computed: {
@@ -242,7 +262,7 @@
       },
       toViewPage: function() {
         wx.navigateTo({
-          url: '../index/index'
+          url: '/pages/auth'
         })
       },
       touchStart (event) {
@@ -251,15 +271,37 @@
         // console.log("起始点的坐标X:" + touchDotX);
         // console.log("起始点的坐标Y:" + touchDotY);
       },
+      touchMove(event) {
+        let touchX = event.touches[0].pageX;
+        let touchY = event.touches[0].pageY;
+        //如果元素拖动到购物车范围
+        let {left, top, bottom, right} = this.shopcarPosition
+        if(touchX>left-10 && touchX<right+10) {
+          if(touchY>top-10 && touchY< bottom +10) {
+            this.bigshop = true;
+          }
+        }
+      },
       // 移动结束处理动画
       touchEnd(event) {
         // console.log(event.currentTarget.dataset,2)
         // 手指离开屏幕时记录的坐标
         let touchMoveX = event.changedTouches[0].pageX;
         let touchMoveY = event.changedTouches[0].pageY;
+        let current = event.currentTarget.dataset
+        if(this.bigshop) {
+          this.bigshop = false;
+          if(current && current.itemid !== undefined) {
+            this.shopcarlist.push(this.list[current.itemid])
+            this.carinfo += 1 ;
+          }
+          return;
+        }
         // 起始点的坐标(x0,y0)和手指离开时的坐标(x1,y1)之差
         let tmX = touchMoveX - touchDotX;
         let tmY = touchMoveY - touchDotY;
+        //console.log(touchMoveX,touchMoveY,'touch')
+        //console.log(this.shopcarPosition
         // 两点横纵坐标差的绝对值
         let absX = Math.abs(tmX);
         let absY = Math.abs(tmY);
@@ -272,7 +314,7 @@
           if (absX < absY) {
             // 如更tmX<0，即(离开点的X)-(起始点X)小于0 ，判定为下滑
             if (tmY < 0) {
-              this.deleteAnimation(event.currentTarget.dataset);
+              this.deleteAnimation(current);
               // console.log("上滑=====");
               // 执行左滑动画
               // 如更tmX>0，即(离开点的X)-(起始点X)大于0 ，判定为上滑
@@ -374,7 +416,15 @@
         'https://vdept.bdstatic.com/4668655278575131635578744a355671/6453433744785466/b5393b0ee87409000a401b6f608ccc794c8eb3c5829f3b7d2b3289bfdcff2ab2d89987516c0b7f193da3845400eeca3e.mp4?auth_key=1589361002-0-0-8c85a0fcd6b08a3e0415e0e60ca52a70',
       ];
       this.videoList = urls.map((url, index) => ({ id: index + 1, url }))
-    }
+    },
+    onLoad () {
+      const query = wx.createSelectorQuery();
+      query.select('#shopcar').boundingClientRect()
+      let that = this;
+      query.exec(function(res){
+        that.shopcarPosition = res[0];
+      })
+    },
   });
 </script>
 <config>
@@ -382,7 +432,8 @@
     navigationBarTitleText: '主页',
     usingComponents: {
       'van-button': '../components/vant/button/index',
-      'video-list': '~@/components/custom/videolist'
+      'video-list': '~@/components/custom/videolist',
+      'van-icon': '../components/vant/icon/index'
     }
 }
 </config>