调整INode为Element

pages/template/drop-card/card/card.uvue

@@ -21,7 +21,7 @@
   export default {
     data() {
       return {
-        $nodeMap:new Map<string, INode>(),
+        $elementMap:new Map<string, Element>(),
         x: 0 as number,
         y: 0 as number,
         // 飘走的卡片计数
@@ -59,8 +59,8 @@
 
       // TODO 需要延迟设置才能生效
       setTimeout(()=>{
-        this.setINodeStyle('card','height', screenHeight * 0.7 + 'px');
-        this.setINodeStyle('card-img','height', screenHeight * 0.7 + 'px');
+        this.setElementStyle('card','height', screenHeight * 0.7 + 'px');
+        this.setElementStyle('card-img','height', screenHeight * 0.7 + 'px');
         this.initCardStyle()
       },200)
 
@@ -74,20 +74,20 @@
       initCardStyle(){
         let _index = (this.cardIndex + this.floatCount)%3
         // console.log('~~~~~~_index:'+_index + ' cardIndex:'+this.cardIndex+' floatCount:'+this.floatCount);
-        this.setINodeStyle('card','z-index', _index)
-        this.setINodeStyle('card','margin-top', screenHeight * 0.15 - 30 * _index + 'px');
-        this.setINodeStyle('card','transform', 'scale('+(0.9 + 0.05 * _index)+')')
+        this.setElementStyle('card','z-index', _index)
+        this.setElementStyle('card','margin-top', screenHeight * 0.15 - 30 * _index + 'px');
+        this.setElementStyle('card','transform', 'scale('+(0.9 + 0.05 * _index)+')')
       },
-      // 工具方法，用于快速设置 INode 的 style
-      setINodeStyle(refName:string,propertyName : string, propertyStyle : any) : void {
-        let node : INode | null = this.$nodeMap.get(refName)
-        if(node == null){
-          node = this.$refs.get(refName) as INode;
-          this.$nodeMap.set(refName,node)
+      // 工具方法，用于快速设置 Element 的 style
+      setElementStyle(refName:string,propertyName : string, propertyStyle : any) : void {
+        let element : Element | null = this.$elementMap.get(refName)
+        if(element == null){
+          element = this.$refs.get(refName) as Element;
+          this.$elementMap.set(refName,element)
         }else{
           // console.log('直接拿');
         }
-        node?.style?.setProperty(propertyName, propertyStyle);
+        element?.style?.setProperty(propertyName, propertyStyle);
       },
       touchstart(e : TouchEvent) {
         // console.log('touchstart')
@@ -160,13 +160,13 @@
         if(k.toInt() != 0){
           cardTo(k * screenWidth * 1.3, this.y * 3,()=>{
             //  状态图标变回透明
-            this.setINodeStyle("state-icon-like",'opacity', 0)
-            this.setINodeStyle("state-icon-dislike",'opacity', 0)
+            this.setElementStyle("state-icon-like",'opacity', 0)
+            this.setElementStyle("state-icon-dislike",'opacity', 0)
 
             // 设置为透明，防止飘回时因为 margin-top 太高，露出来
-            this.setINodeStyle("card",'opacity', 0)
+            this.setElementStyle("card",'opacity', 0)
             setTimeout(()=>{
-              this.setINodeStyle("card",'opacity', 1)
+              this.setElementStyle("card",'opacity', 1)
             },300)
 
             // 执行卡片飘动后事件，注意uni.$emit是全局事件。其他卡片也会执行
@@ -185,12 +185,12 @@
         }
       },
       moveCard() {
-        this.setINodeStyle("card",
+        this.setElementStyle("card",
           'transform',
           `translate(${this.x}px,${this.y}px) rotate(${this.x/-30}deg) scale(1)`
         )
-        this.setINodeStyle("state-icon-like",'opacity', this.x < 0 ? 0 : this.movePercent * 10)
-        this.setINodeStyle("state-icon-dislike",'opacity', this.x > 0 ? 0 : this.movePercent * 10)
+        this.setElementStyle("state-icon-like",'opacity', this.x < 0 ? 0 : this.movePercent * 10)
+        this.setElementStyle("state-icon-dislike",'opacity', this.x > 0 ? 0 : this.movePercent * 10)
       }
     }
   }

pages/template/pull-zoom-image/pull-zoom-image.uvue

@@ -36,7 +36,7 @@
   export default {
     data() {
       return {
-        $INodeMap: new Map<string, INode>()
+        $elementMap: new Map<string, Element>()
       }
     },
     methods: {
@@ -51,23 +51,23 @@
           s = 0.7
         }
         let x : number = (1 - s) * -100
-        this.setINodeStyle("user-info", "transform", `translate(${x},${y + (s-1)* -50}px) scale(${s})`)
-        this.setINodeStyle("head-img-box-2", "transform", `translateY(${y}px)`)
+        this.setElementStyle("user-info", "transform", `translate(${x},${y + (s-1)* -50}px) scale(${s})`)
+        this.setElementStyle("head-img-box-2", "transform", `translateY(${y}px)`)
       },
       onRefresherpulling(e : RefresherEvent) {
         // console.log('onRefresherpulling',e.detail.dy)
         let pullingDistance : number = e.detail.dy
-        this.setINodeStyle("head-img-1", 'transform', `scale(${pullingDistance / 200 + 1})`)
-        this.setINodeStyle("head-img-2", 'transform', `scale(${pullingDistance / 200 + 1})`)
+        this.setElementStyle("head-img-1", 'transform', `scale(${pullingDistance / 200 + 1})`)
+        this.setElementStyle("head-img-2", 'transform', `scale(${pullingDistance / 200 + 1})`)
       },
-      // 工具方法，用于快速设置 INode 的 style
-      setINodeStyle(refName : string, propertyName : string, propertyStyle : any) : void {
-        let iNode : INode | null = this.$INodeMap.get(refName)
-        if (iNode == null) {
-          iNode = this.$refs.get(refName) as INode;
-          this.$INodeMap.set(refName, iNode)
-        }
-        iNode.style.setProperty(propertyName, propertyStyle);
+      // 工具方法，用于快速设置 Element 的 style
+      setElementStyle(refName : string, propertyName : string, propertyStyle : any) : void {
+        let element : Element | null = this.$elementMap.get(refName)
+        if (element == null) {
+          element = this.$refs.get(refName) as Element;
+          this.$elementMap.set(refName, element)
+        }
+        element.style.setProperty(propertyName, propertyStyle);
       },
       back() {
         uni.navigateBack({