优化示例drop-card 通过dom的ref操作减少diff、过度动画替代帧动画

a17f3bc7 · DCloud_JSON · 7a2ad376 · a17f3bc7
显示空白变更内容
内联并排

Showing with 139 addition and 100 deletion

pages/template/drop-card/drop-card.uvue pages/template/drop-card/drop-card.uvue +139 -100

未找到文件。
--- a/pages/template/drop-card/drop-card.uvue
+++ b/pages/template/drop-card/drop-card.uvue
 <template>
  <view class="root">
-    <view class="card"
+    <template v-for="(item,index) in cardList" :key="index">
-      :style="{'top':Math.abs(x)/-60 + 90 +'px',transform:'scale('+(movePercent/10+0.80)+')','height':cardHeight+'px'}">
+      <view class="card" ref="card" @touchstart="touchstart($event as TouchEvent,index)" @touchmove="touchmove($event as TouchEvent,index)" @touchend="touchend" @touchcancel="touchend">
-      <image class="user-img" :src="userList[0]" :style="{'height':cardHeight+'px'}"></image>
+        <image class="card-img" ref="card-img" :src="item"></image>
-    </view>
+        <template v-if="index == 2">
-    <view class="card"
-      :style="{'top':Math.abs(x)/-30 + 45 +'px',transform:'scale('+(movePercent/10+0.90)+')','height':cardHeight+'px'}">
-      <image class="user-img" :src="userList[1]" :style="{'height':cardHeight+'px'}"></image>
-    </view>
-    <view @touchmove="touchmove" @touchstart="touchstart" @touchend="touchend"
-      :style="{'transform':'translate('+x+'px,'+y+'px) rotate('+x/-30+'deg)','height':cardHeight+'px'}" class="card">
-      <image class="user-img" :src="userList[2]" :style="{'height':cardHeight+'px'}"></image>
          <view class="state">
-        <image class="state-icon like" :style="{'opacity':x < 0 ? 0 : movePercent * 10}" src="/static/template/drop-card/like.png" mode="widthFix"></image>
+            <image class="state-icon like" ref="state-icon-like" src="/static/template/drop-card/like.png" mode="widthFix"></image>
-        <image class="state-icon dislike" :style="{'opacity':x > 0 ? 0 : movePercent * 10}" src="/static/template/drop-card/dislike.png" mode="widthFix"></image>
+            <image class="state-icon dislike" ref="state-icon-dislike" src="/static/template/drop-card/dislike.png" mode="widthFix"></image>
          </view>
+        </template>
      </view>
+    </template>
  </view>
 </template>
 <script lang="ts">
  let sX : number = 0,
    sY : number = 0,
-      screenWidth : number = 1;
+    screenWidth : number = 1,
+    nodesMap = new Map<string, INode[]>();
  export default {
    data() {
      return {
        x: 0,
        y: 0,
-        cardHeight:1,
+        cardList: [
-        userList: [
+          '/static/template/drop-card/1.jpg',
-          '/static/template/drop-card/1.png',
+          '/static/template/drop-card/2.jpg',
-          '/static/template/drop-card/2.png',
+          '/static/template/drop-card/3.jpg'
-          '/static/template/drop-card/3.png'
+        ] as string[],
-        ]
+        NodesMap: new Map<string, INode[]>(),
+      }
+    },
+    onReady() {
+      this.setStyle('card',2,'transitionTimingFunction','ease-in-out');
+      this.setStyle('card',2,'transitionProperty','transform');
+      uni.getSystemInfo({
+        success: (e) => {
+          // console.log('e',e);
+          screenWidth = e.screenWidth;
+          let height = e.screenHeight - 200 + 'px'
+          for (var i = 0; i < 3; i++) {
+            this.setStyle('card',i,'height', height);
+            this.setStyle('card-img',i,'height', height);
+          }
+        }
+      })
+    },
+    watch: {
+      x() {
+        this.onMove()
+      },
+      y() {
+        this.onMove()
      }
    },
    computed: {
      movePercent() : number {
-        return Math.abs(this.x) / screenWidth
+        return Math.abs(this.x) / (screenWidth/2*3)
      },
-      likeOpacity() : number{
+      likeOpacity() : number {
        return this.x < 0 ? 0 : this.movePercent * 100
      },
-      dislikeOpacity() : number{
+      dislikeOpacity() : number {
        return this.x > 0 ? 0 : this.movePercent * 100
      }
    },
-    onLoad() {
+    methods: {
-      uni.getSystemInfo({
+      setStyle(refName:string,index:number,propertyName:string,propertyStyle:any):void{
-        success: (e) => {
+        let nodes:INode[]|null = nodesMap.get(refName)
-          console.log('e',e);
+        if(nodes == null){
-          screenWidth = e.screenWidth
+          nodes = this.$refs.get(refName) as INode[]
-          this.cardHeight = e.screenHeight - 200
+          nodesMap.set(refName,nodes)
+        }else{
+          // console.log('直接拿');
        }
-      })
+        (nodes)[index].style.setProperty(propertyName,propertyStyle);
      },
-    methods: {
+      onMove() {
-      changeUserList() {
+        this.setStyle('card',0,'transform', 'scale('+(this.movePercent/10+0.80)+')')
-        let user:string = this.userList[this.userList.length - 1]
+        this.setStyle('card',1,'transform', 'scale('+(this.movePercent/10+0.90)+')')
-        this.userList.unshift(user)
+        this.setStyle('card',2,'transform', 'translateX('+this.x+'px) translateY('+this.y+'px) rotate('+this.x/-30+'deg)')
-        this.userList.pop()
-        this.x = 0;
+        this.setStyle('state-icon-like',0,'opacity', x < 0 ? 0 : movePercent * 10)
-        this.y = 0;
+        this.setStyle('state-icon-dislike',0,'opacity', x > 0 ? 0 : movePercent * 10)
+      },
+      changeCardList() {
+        let newArr = this.cardList.slice();
+        this.cardList[0] = newArr[2]
+        this.cardList[1] = newArr[0]
+        this.cardList[2] = newArr[1]
+        this.x = 0
+        this.y = 0
      },
-      touchstart(e : TouchEvent) {
+      touchstart(e : TouchEvent,index:number) {
+        if(index != 2){
+          return 
+        }
        sX = e.touches[0].screenX;
        sY = e.touches[0].screenY;
      },
-      touchmove(e : TouchEvent) {
+      touchmove(e : TouchEvent,index:number) {
+        if(index != 2){
+          return 
+        }
        this.x += e.touches[0].screenX - sX;
        this.y += e.touches[0].screenY - sY;
        sX = e.touches[0].screenX;
        sY = e.touches[0].screenY;
      },
      touchend() {
-        if (this.x > screenWidth / 6) {
+        // console.log('touchend');
-          let interval : number = 0;
-          interval = setInterval(() => {
+        // 设置释放之后飘走的方向 0回到坐标中心 1向右 2向左
-            this.x += 10
+        let k:number = 0;
-            this.y += 3
+        if (this.x > screenWidth / 6 ) {
-            if (this.x > screenWidth) {
+          k = 1
-              clearInterval(interval)
+        }else if(this.x < screenWidth * -1 / 6){
-              this.changeUserList()
+          k = -1
-            }
-          }, 6)
-        } else if (this.x < screenWidth * -1 / 6) {
-          let interval : number = 0;
-          interval = setInterval(() => {
-            this.x -= 10
-            this.y += 3
-            if (this.x < -screenWidth) {
-              clearInterval(interval)
-              this.changeUserList()
-            }
-          }, 6)
-        } else {
-          this.x = 0
-          this.y = 0
        }
+        // 设置动画时间
+        let time = 400;
+        this.setStyle('card',2,'transitionDuration',time.toFixed(0));
+        this.x = screenWidth * 1.5 * k
+        this.y = Math.abs(screenWidth * 0.5 * k)
+        setTimeout(()=>{
+          //关闭动画
+          this.setStyle('card',2,'transitionDuration',0);
+          // 更改卡片上的图片内容
+          if(k != 0){
+            this.changeCardList()
+          }
+        },time)
      }
    }
  }
@@ -117,9 +153,10 @@
    border-radius: 10px;
    color: #FFF;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+    z-index: 100;
  }
-  .user-img{
+  .card-img {
    border-radius: 10px;
  }
@@ -132,6 +169,7 @@
    flex-direction: row;
    justify-content: space-between;
  }
  .state-icon {
    width: 30px;
    height: 30px;
@@ -140,5 +178,6 @@
    padding: 3px;
    border-radius: 100px;
    box-shadow: 0 0 1px #EBEBEB;
+    opacity: 0;
  }
 </style>
\ No newline at end of file